<div id="ball"></div>
body{
background-color:#eee;
padding:50px;
}
#ball{
width:100px;
height:100px;
border-radius:50%;
background-color:#A94CAF;
animation:move 2s ease forwards ; /*停留在结束状态。*/
}
@keyframes move{
0%{
transform:translateX(0);
}
50%{
transform:translateX(400px);
}
100%{
transform:translateX(400px) scale(2); /*状态的样式不会继承。所以必须加上x轴的坐标值。*/
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.