css动画

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：一个数字，定义应该播放多少次动画