<style>
/* 定义名称为zhuan的动画 */
@keyframes zhuan {
0% {
transform: translate(0, 0);
}
/* 水平移动 */
30% {
transform: translate(600px, 0);
}
/* 放大x,y 2倍*/
50% {
transform: scale(2, 2);
}
/* 旋转45度 */
70% {
transform: rotate(180deg);
/* 设置旋转中心为y轴中点 */
transform-origin: 0 50%;
}
100% {
transform: translate(1500px, 800px);
}
}
div {
width: 300px;
height: 300px;
background-color: aqua;
animation: zhuan;
/* 动画持续时间 */
animation-duration: 10s;
}
</style>