web帧动画

一、帧动画

1、定义关键帧

@keyframes 动画名称（英文） {
            0% {
                /* 动画的开始 */
            }

            25% {
                /* 在25%的时候进行的一个动画 */
            }

            50% {
                /* 在50%的时候进行的一个动画 */
            }

            100% {
                /* 动画结束 */
            }

        }

2、引用帧动画

 animation: name duration timing-function delay iteration-count direction fill-mode;
 animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态

二、animate.css动画插件

1、第一步. 引入animate.css文件

第二步. 给指定的元素加上指定的动画样式名

三、css3中过渡和动画的区别？

• 区别：语法、触发、执行次数、复杂度

• 相同点 ： 都是随着时间改变元素的属性值。

• 不同点：

  1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画

  2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画