CSS 动画分类

CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画；然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes，keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与JS 动画主要是Animate.css 的引入、Animate.css 使用举例和JS 动画。

首先，CSS动画分类的基本概念：

1 过渡动画（transition）

从初始状态过渡到结束状态所产生的动画，它只能定义初始和借宿两个状态，不能定义中间状态，它是一种很简单的最基础的css动画，这个过渡动画只能被动触发，不能主动触发，而且也不能重复发生。被动触发一次，它发生一次，不能重复。

2 关键帧动画（Animation）

使用关键帧@keyframes，在关键帧里面的写法如下：

在每一个阶段我们可以定义不同的元素状态，也就是css，这样就大大增强了css的动画能力。

总结起来就是：可以定义多个状态，可以实现更复杂的效果，相对于transition它可以主动的触发，也可以重复发生。

@keyframes 动画名称 {
    时间点 {
		元素状态
	}
    时间点 {
		元素状态
	}
    时间点 {
		元素状态
	}
    时间点 {
		元素状态
	}
    …
}

其次 浏览器支持

完全支持该属性的第一个浏览器版本

基本语法

    .main {
        animation: animationname(动画名字) duration(持续时间) timing-function(时间运动曲线) delay(延迟) iteration-count(总共重复的次数) direction(方向，正向播放还是反向播放) fill-mode(定义开始和结束的状态) play-state(是否停止或运行这个动画);
    }
    
    //animationname是和keyframes绑定的，在animationname下面定义动画的状态，一种是from...to从开始到结束，这个是和transition一样的，一种是百分比，从0%到100%，可以定义任意的中间状态。
    @keyframes animationname {
        from { css-code }
        to { css-code }
    
        0% - 100% { css-code }
    }

1 animationname - 关键帧名称

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }
    
    @keyframes round {
        from { css-code }
        to { css-code }
    
        0% - 100% { css-code }
    }

2 duration - 动画持续时间（单位：s/ms）

    .main {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
         animation-name: round;
         animation-duration: 500ms;
         animation-iteration-count: infinite;
     }
     @keyframes round {
         0%  {
               top: 0%;
               left: 0%;
               background: red;
         }
         25% {
               top: 0%;
               left: calc(100% - 100px);
               background: blue;
         }
         50% {
               top: calc(100% - 100px);
               left: calc(100% - 100px);
               background: yellow;
         }
         75% {
               top: calc(100% - 100px);
               left: 0%;
               background: green;
         }
         100% {
               top: 0%;
               left: 0%;
               background: red;
         }
     }

3 timing-function - 时间函数曲线

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);   //贝塞尔曲线
    }

timing-function 在animation里面的时间区间是两套css样式之间 ** **4 delay - 动画开始延迟时间（单位：s/ms）

仅定义第一次开始延迟时间

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    	animation-delay: 3s;
    }

5 iteration-count - 动画播放次数

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
    }

在transition里面是不能定义播放次数的，但是animation可以，它可以定义两种：一种是具体的播放次数（n），一种是无限循环（infinite）。

6 direction - 动画播放方向

动画实际上是相对于时间来讲的，它的播放方向就是正向还是反向播放。它有四个值，分别是：

normal（正常播放）、reverse（反向播放）、alternate（奇数次正向，偶数次反向）、alternate-reverse（偶数次正向，奇数次反向）。

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
    }

7 fill-mode - 动画不播放时应用到元素的样式

分为两个状态，一个是还没有开始放，另一个是放完了，也就是说它的循环次数不是无限次的，那么对应的有两个值比较关键：forwards 动画结束后动画将应用该属性值，也就是说动画播放完了，我们继续保留这个属性；backwards 动画开始前应用第一帧的样式，比如说本来有一个样式，然后有一个动画，动画没开始，这时我们就需要把动画的第一帧应用到当前的这个元素上。除此之外呢，还有一个none 两个都不用也就是动画结束后恢复原有样式以及both 两个都用。

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }

8 play-state - 控制动画运行或暂停

有两个值：paused 暂停和 running 运行。play-state一般应用于JS，应用js来控制css是否运行。

转载于:https://my.oschina.net/u/4144971/blog/3068944