arrow{
right: 630rpx;
margin-top: -108rpx;
animation:myfirst 460ms;
}
@keyframes myfirst
{
from {right: 0rpx;}
to {right: 630rpx;}
}
代表的是在460ms之内从样式{right: 0rpx;}到样式{right: 630rpx;}
.container {
animation-delay: .8s;
}
.outter {
animation-delay: 1.5s;
}
.inner {
animation-duration: 2.4s;
-webkit-animation-name: state1;
animation-name: state1;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes state1 {
0% {
opacity: .5;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(4.5);
transform: scale(4.5);
}
}
animation-delay 3s
等待三秒后进行动画
animation-duration
为 @keyframes 动画规定一个名称：始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
animation-name
为 @keyframes 动画规定一个名称：
animation-timing-function
指定动画将如何完成一个周期。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
image.png
animation-iteration-count: value;
value：一个数字，定义应该播放多少次动画
