帧动画keyframes讲解和属性作用

[奥沙利文.]

帧动画

1.什么是帧动画：

      帧动画也叫动画，是css中非常重要的一个东西，也叫keyframe，CSS3动画是CSS中具有颠覆性的特征之一，动画可以被用来实现各种复杂的效果，如平移、旋转、缩放、倾斜、淡入淡出等。这种技术最大的优点是能够在不使用任何插件的情况下实现各种创意的动画效果，并且操作简单，易于控制，相比过渡（transition），动画可以实现更多变化、更多控制和连续自动播放等效果

2.帧动画的优点：

CSS3动画具有以下优点：

1. 无需插件支持，纯CSS实现；
2. 方便控制，可以精确到每一个帧；
3. 支持所有浏览器，兼容性好；
4. 可以和JavaScript等技术结合使用；
5. 可以用来实现各种创意的动画效果。

3.帧动画的属性及作用：

1.定义帧动画：@keyframes  后边跟动画名称（可以自定义名称）

2.帧动画分三种形式：

     ①  0% -------100%，中间可以写任何百分比    比较建议，易控制，动画幅度更多

     ②  form是开始   to是结束     

     ③  form和to可以和百分比混合使用，但不建议，容易乱套

3.写完keyframes中的动画需求之后，需要用animation引入帧动画，谁需要这个动画就加给谁（建议动画的需求是目标属性中有的）

4.animation的属性：

    ①  name: 动画名称（也就是keyframes后边的名称）

    ②  duration 动画执行时间（多长时间进行完毕这个动画  单位s，也可以小数，如果是1秒以                 下，可以省略0，就比如0.5s可以简写成.5s，点不能省略）

    ③  timing-function 速度曲线

           数值：    ease：默认值，先慢后快最后慢

                          ease-in  先慢后快

                          ease-out  先快后慢

                          ease - in - out  先慢后快最后慢  相对于ease更慢一些

                          step-start   不考虑过渡时间，直接到终点

                          step-end   不考虑过渡时间，时间到了直接到终点

                          steps  （数值）（步长，一段一段的过渡）

                          cubIc - bezier  （贝塞尔曲线）

                          linear   匀速

     ④  delay  延时执行   （单位s   可以是小数，小数的时候可以省略0，直接.5s）

     ⑤  iteration-count  动画播放的次数

                         默认就运动一次

                         infinite  无数次

    ⑥  direction  动画运动的方向

                         normal  从左到右  （默认值）

                         reverse  反向

                         alternate   来回滚动

                         alternate-reverse   反向来回滚动

    ⑦   fill-mode  动画以外的状态，就是动画运行完之后停止在哪里

                       forwards  停止在最后一帧

                       backforwards  运动完停止在第一帧

    ⑧  play-state   滑入动画之后的播放状态   （不能写入复合属性，需要单独设置）

                         paused  暂停

                         running  运行（默认值）

           ⑧效果如下图：

                   

     ⑨   复合属性

        animation : 动画名称   运行时间  延时时间  速度曲线  动画次数  运动方向  运行完的状态

        animation：动画名称       1s            .5s            linear      infinite     normal      forwards

 ！！！ 注意： 动画名称和运行时间必须写，运动时间和延时时间别写反了，其他属性能省略不写

           帧动画和transition也可以一起用：

.box1:hover{
            animation: hover 2s linear forwards;
            
        }