# 过渡(transition)

CSS3过度是新增的属性之一，可以让我们不需要使用flash动画或者javascript的情况下，当元素从一种样式变换为另一种样式时，为元素增加效果。

过度动画指的是一个状态渐渐过渡到另外一个状态，比如从个苹果转变成一个西瓜，过度实现转变之间的平滑切换。

我们现在经常用 ：hover一起搭配使用。

语法：transition:要过度的属性花费时间运动曲线何时开始；

属性：指的是元素的宽度，高度，颜色等，如果想全部变换，则写all
花费时间:单位时间为s，写0.5s表示花费0.5秒
运动曲线：默认为ease，（可省略）
何时开始:单位是秒，也就是事件触发的延时时间，默认是0s。（可省略）

好兄弟不妨试试以下例子，实现从红色盒子转换成粉色盒子.

动画

可以通过多个节点来精确控制一个或者一组动画，常来实现复杂的动画效果，动画与过渡的区别在于，动画能实现更多变化，更多控制等效果。

制作动画分为两个步骤

先定义动画

再调用动画

用keyframes定义动画

@keyframes turnto {
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(500px);
        }
}

动画序列：

0%是动画的开始，100%是动画的结束，这个就是动画序列

通过在@keyframes中规定某项CSS样式，就能创建不同的动画效果

我们可以通过改变任意多的样式设置任意多的动画效果

我们用百分比来规定动画发生的顺序，也可以通过from与to分别代表0%与100%

调用动画

animation-name:动画名称

animation-duration:动画持续时间

        div{
            width: 100px;
            height: 100px;
            background: purple;
            margin: 0 auto;
            /* 调用动画 */
            animation-name:turnto;
            /* 动画持续时间 */
            animation-duration:1s;
         }

动画的属性

属性	描述
animation-delay	设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction	设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行
animation-duration	设置动画一个周期的时长。
animation-iteration-count	设置动画重复次数，可以指定 infinite 无限次重复动画
animation-play-state	允许暂停和恢复动画。
animation-name	指定由@keyframes描述的关键帧名称
animation-timing-funciton	设置动画的运动曲线
animation-fill-mode	动画结束后停留在起始位置或者结束位置

动画属性的使用格式：

        animation{
            /* 延迟4s开始播放 */
            animation-delay: 4s;
            /* 运动曲线，平稳播放 */
            animation-timing-function: ease;
            /* 设置动画播放无限循环 count表示次数。infinite表示无限 */
            animation-iteration-count: infinite;
            /* 是否反方向播放 alternate表示逆向播放  normal表示默认播放*/
            animation-direction: alternate;
            /* 动画结束后停留在起始位置或者结束位置，停在结束位置设置backwards */
            animation-fill-mode: backwards;
            /* 规定动画运行或者停止，可以设置鼠标经过时停止 running为运行,pause为停止*/
            animation-play-state: running;
            
        }

CSS过渡与动画

动画

用keyframes定义动画

调用动画

动画的属性