动画

首先创建一个动画

@keyframes move（这是动画的名字）{

      from{

                                        }    

         to{                    

                                        }

---

     0%{

                 }

      50%{

                   }

        100%{

                    }----------动画移动到时间的0% 50% 100%时的效果；------------

}

然后设置这个动画的宽高，及其他：

     width：

     height：

     background：

    top：

    left：

    animation：move（动画的名字）3s（动画运行的时间）1；（动画运行的次数；infinite是重复）

---

animation：move 3s  infinite；可以分解为

 

                                          animation-name：move；------动画的名字

                                          animation-duration：3s；-------设置动画播放的时间；

                                          animation-iteration-count;---------动画的播放次数；

                                           ------------------------------

                                          animation-timing-function：linear；----设置动画的速度曲线；

                                          animation-delay：1s； -----设置动画的延长时间；

                                          animation-direction：alternate；-----设置是否反向运动；

                                          animation-fill-male:farwards；-----设置动画执行反停在那种状况下；

                                          animation-play-state：paused；------设置当前动画播放状态；

 

                                         transform:rotate(360deg);-----旋转；

                                         transform：scale(.5)；-----缩放；

                                         transform：translate（600px）；--------平移；

                                         transform：skew（45deg）；-------------倾斜；

                                         如果运用的transform属性较多那么就写在一起，否则下面的属性会覆盖上面的属性。

                                    

转载于:https://www.cnblogs.com/cntt/p/6418152.html