版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/DreamFJ/article/details/83511158
animation可以同时写多个动画，这里只是给出一个例子，其实可以用一个动画就能实现了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.test{
width: 100px;
height: 100px;
background-color: red;
}
.test:hover {
animation:move2 1s ease,move1 1s ease 1s;
}
@keyframes move1{
from {transform: scale(1.5) translateX(0)}
to {transform: scale(1.5) translateX(100px)}
}
@keyframes move2{
from {transform: scale(1)}
to {transform: scale(1.5)}
}
</style>
</head>
<body>
<div class="test">我是动画</div>
</body>
</html>