body {
background-color: pink;
}
@keyframes move {
0% {
width: 200px;
height: 200px;
}
5% {
width: 800px;
}
10% {
width: 1600px;
}
15% {
width: 2400px;
}
20% {
width: 3200px;
}
25% {
width: 4000px;
}
30% {
transform: translate(4000px, 0);
width: 200px;
}
35% {
transform: translate(4000px, 400px);
height: 400px;
width: 200px;
}
40% {
}
45% {
}
50% {
}
55% {
}
60% {
}
65% {
}
70% {
}
75% {
}
80% {
}
85% {
}
90% {
}
95% {
}
100% {
}
}
img {
display: block;
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid red;
/* animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate; */
animation: move 10s 2 alternate;
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史