Css3——动画

一、动画是什么？

动画是Css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

二、动画的基本使用

制作动画分为两步：

1.先定义动画
2.再使用(调用)动画

注：1.0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
2.在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
3.动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
4.请用百分比来规定变化发生时间，或用关键词"from"和"to",等同于0%和100%
语法：

1.定义：
@keyframes 动画名称 {
	0%{
	width：100px;
	}
	100%{
	width:200px;
	}
	}
2.调用：
div{
	width:200px;
	height:200px;
	background-color:pink;
	/调用动画/
	animation-name:动画名称;
	/持续时间/
	animation-duration:持续时间;
}

例：
HTML：

<div></div>

Css:

 /* 1.定义动画 */
        @keyframes move {

            /* 开始状态    */
            0% {
                transform: translateX(0px);
            }

            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

效果：

动画序列

1.可以做多个状态的变化 keyframe 关键帧
2.里面的百分比要是整数
3.里面的百分比就是 总的时间(10s)的划分
例：
HTML：

   <div></div>

Css

@keyframes move {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }
            75%{
                transform: translate(0,500px);
            }
            100%{
                transform: translate(0,0);
            }
        }

        /动画序列 /
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }

效果：

动画的属性

@keyframes 规定动画模式
animation 设置所有动画属性的简写属性
animation-name 规定 @keyframes 动画的名称（必须填写）
animation-duration 规定动画完成一个周期应花费的秒或毫秒，默认是0（必须填写）
animation-timing-function 规定动画的速度曲线
animation-delay 规定动画何时开始，默认是0
animation-iteration-count 规定动画应播放的次数，默认是1
animation-direction 定动画是向前播放、向后播放还是交替播放
animation-play-state 规定动画是运行还是暂停。默认是running，还有paused
animation-fill-mode 规定动画结束后状态，保持forwards回到开始backwards

HTML

<div></div>

Css

  @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
             width: 100px;
            height: 100px;
            background-color: pink;
            / 动画名称 /
            animation-name: move;
            / 持续时间 /
            animation-duration: 2s;
            / 运动曲线 /
            animation-timing-function: ease;
            / 何时开始 /
            animation-delay: 1s;
            / 重复次数 /
            animation-iteration-count: infinite;  /重复无数次/
            / 是否反方向播放 /
            animation-direction: alternate; /默认是normal 如果反方向就写alternate/
            /动画结束后的状态 默认是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards /
            animation-fill-mode: forwards;           
        }
         div:hover{
            / 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 /
            animation-play-state: paused;
        }

动画简写属性

animation：动画名称 持续时间 运动曲线 何时播放 播放次数 是否反向 动画起始或者结束的状态
animation:name duration timing-function delay iteraiton-count direction fill-mode
Css

animation:move 2s linear 0s 1 alternate forwards;

注：
简写属性里面不包含 animation-play-state
暂停动画： animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction:alternate
盒子动画结束后，停在结束位置：animation-fill-mode:forwards