css如何自定义一个动画效果

主要考察对animation动画的掌握程度

animation: name duration timing-function delay iteration-count direction fill-mode;

animation属性分为：
animation-name 动画名称[必须存在，默认为none，没有动画]
animation-duration 动画执行一次所需时间[必须存在，默认为0，没有动画]
animation-delay 动画开始前的延迟[默认为0，没有延迟，单位可以是s(秒)，也可以是ms(毫秒)]
animation-timing-function 动画轨迹[默认为ease]

1. linear:动画匀速
2. ease-in:动画以低俗开始
3. ease-out:动画以低俗结束
4. ease-in-out:动画以低俗开始和结束
5. ease:动画低速开始，然后加速，最后在结束前变慢

animation-iteration-count 动画播放次数[默认1次]

1. 直接写数字，自定义想要的播放动画次数
2. infinite：动画无限播放

animation-fill-mode 定义动画结束以后或者未开始的元素样式[默认为none，不在动画结束或未开始时给元素加样式]

1. forwards:动画结束后，元素直接使用当前样式。
2. backwards:在动画延迟时间元素使用关键帧中from的属性值或者to属性值(当animation-direction为reverse或者alternate-reverse时)

animation-direction 是否轮流反向播放动画[默认为normal，动画正常播放，如果动画只播放一次，那么改属性无效]

1. reverse:动画反向播放。
2. alternate:动画在奇数次播放时为正向播放，为偶数次时反向播放。
3. alternate-reverse:动画在奇数次时反向播放，为偶数次时正向播放。

//正方形逆时针2s旋转360度,然后顺时针2s旋转360度后停止。
<div class="square"></div>
.square {
    width: 40px;
    height: 40px;
    background-color: #f00;
    animation: play 4s linear;
}

@keyframes play {
    0% {
        transform: rotate(360deg);
    }

    50% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(0);
    }
}