5分钟上手animation，keyframes动画,实现旋转的虎虎生威

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

写在前面

虎年来临。我们的虎年第一弹，就是用帧动画去实现是一个比较简单的虎虎动画。
2021年的开发中，我很少去用帧动画去写东西。
2022，让我们玩转起起帧动画，做出最精妙的效果。

什么是帧动画

先看看MDN的解释：通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和 [转换 transition]相比，关键帧 keyframes 可以控制动画序列的中间步骤。
其实我的理解就是，可以操作执行过程的一种动画。

帧动画怎么用

首先，animation 语法中有多个属性

animation语法
animation-name	规定需要绑定到选择器的keyframe名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-functin	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放额次数
animation-direction	规定是否应该轮流反向播放动画。

所以说，keyframe就是animation一个属性，定义一个动画名，再被animation-name使用。
那么，怎么样取用keyframe定义一个动画名呢。

 @keyframes roll-in-left {
        0% {
            transform: translateX(-800px) rotate(-540deg);
            opacity: 0**;**
        }

        100% {
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
    }

如上图，@keyframes 在CSS中使用，在@keyframes 后面，跟着的就是动画名称
动画体内，在写入当动画运行百分之多少的时候的状态。
我这边，写的是开始0% 的状态，以及到100% 的状态。
其实中间0%-100% 都可以写的
**紧接着，我们可以，在想运用帧动画的Css 中，去绑定这个帧动画**

    .roll-in-left {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: red;
        animation: roll-in-left 1s ease-out both;
    }

最后，我们再去给这个元素去插入一个图片，设置好位置，设置好大小

  <div class="roll-in-left">
        <img src="./pic.png" alt="">
    </div>

来，看一下运行的效果

就是这么简单，一个很easy的旋转的老虎就出现了。

最后

帧动画，其实还有很多比较华丽的用法，实现各式各样的效果。
但是据我所知，keyframes 对IE的兼容不太有好。这时候，可能就需要去用JS 写一套动画效果去兼容ie