css3 动画

一、transition（过渡）

其作用是平滑的改变css的值，无论是点击、焦点、hover事件，只要css的值改变了，就是平滑的，就是动画；

1、兼容性

• IE10 及以上支持；
• Safari 和 Chrome25 及以前的版本需要前缀 -webkit-；
• Firefox4 及以前版本需要前缀 -moz-；

2、写法

• 要添加过渡的 css 属性；
• 规定效果时长；
• 若给多个属性添加过渡效果，可用逗号隔开多个属性；

div {
  transition: width 2s;
  -moz-transition: width 2s;
  -webkit-transition: width 2s;
  width: 100px;
}
div:hover {
  width: 300px;
}

若无规定时长，则没有过渡效果，默认为0；

3、过渡属性

• transition：简写，一次性设置多个过渡属性；
• transition-property：规定应用过渡的属性名称；
• transition-duration：定义过渡动画持续时间，默认 0s；
• transition-delay：指定延迟过渡时间，默认是0s；
• transition-timing-function：定义过渡效果时间曲线，默认 'ease'；
  • linear：匀速；
    相当于：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
  • ease：慢速开始，变快，慢速结束；
    相当于：cubic-bezier(.25, .1, .25, 1)
  • ease-in：慢速开始，变快；
    相当于：cubic-bezier(.42, 0, 1, 1)
  • ease-out：正常开始，慢速结束；
    相当于：cubic-bezier(0, 0, .58, 1)
  • ease-in-out：规定以慢速开始和结束的过渡效果；
    相当于：cubic-bezier(.42, 0, .58, 1)
  • cubic-bezier(x1,y1,x2,y2)：自定义三次贝塞尔曲线，x 值是 0-1 之间的数，y 值任意；
    三次贝塞尔曲线默认 P0(0, 0) 和 P3(1, 1)，中间的 P1 和 P2 拉扯则自定义；

二、animation（动画）

1、兼容性

• IE10 及以上；
• Safari 和 Chrome 需要前缀 -webkit-；
• Firefox 需要前缀 -moz-；

2、@keyframes 规则

• 用于创建动画逐渐变化的规则；
• 可改变任意多样式，任意多次数；
• 用百分比规定变化进度，或者关键字「from」和「to」；
  from=0%，to=100%；

3、animation 动画属性

写法

• 在选择器内定义动画属性；
• 需定义绑定的 @keyframes 动画规则名称；
• 需定义动画时长，若无定义时长则无动画效果，默认值0；
  属性
• animation：简写，规定除了 animation-play-state 之外的所有属性；
• animation-name：规定 @keyframes 动画名称；
• animation-duration：规定动画完成一个周期所花费的时间，默认 0s；
• animation-timing-function：规定动画的速度曲线，默认是 'ease'；
  规则和上面过渡的一样；
• animation-delay：规定动画何时开始，默认 0s；
• animation-iteration-count：规定动画被播放的次数，默认是 1；
  • n：定义播放次数；
  • infinite：无限次播放；
• animation-direction：规定动画是否在下一周期逆向播放， 默认是 'normal'；
  • normal：下一周期正常播放；
  • alternate：轮流反向播放；
• animation-play-state：规定动画是否正在运行或暂停，默认是 'running'；
  • paused：规定动画已暂停；
    -running：规定动画正在播放；
• animation-fill-mode：规定动画时间之外的状态；
  • none：不改变默认行为；
  • forwards：当动画完成之后保持最后一个属性值；
  • backwards：在动画开始之前的时间应用第一个属性值；
  • both：forwards 和 backwards 都被应用；

@keyframes first
{
    0% { background: red; }
    25% { background: yellow; }
    50% { background: blue; }
    75% { background: green; }
    100% { background: black; }
}

@-moz-keyframes first           /* Firefox */
{
    0% { background: red; }
    25% { background: yellow; }
    50% { background: blue; }
    75% { background: green; }
    100% { background: black; }
}

@-webkit-keyframes first        /* Safari & Chrome */
{
    0% { background: red; }
    25% { background: yellow; }
    50% { background: blue; }
    75% { background: green; }
    100% { background: black; }
}

.firstAn {
    animation: first 5s linear 1s 1 normal forwards;
    -moz-animation: first 5s linear 1s 1 normal forwards;
    -webkit-animation: first 5s linear 1s 1 normal forwards;
    
    &:hover {
        animation-play-state: paused;
        -moz-animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }
}