CSS动画【animation】

一、 动画(animation)

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

1、 动画的基本使用

• 先定义动画
• 在调用定义好的动画

2、语法

   @keyframes 动画名称 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }

调用动画

   div {
   	/* 调用动画 */
       animation-name: 动画名称;
    	/* 持续时间 */
    	animation-duration: 持续时间；
   }

二、动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

应用：

  @keyframes move {
            /* from{
                transform: translate(0,0);
            }
            to {
                transform: translate(1000px,0);
            } */
            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: aquamarine;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 4s;
            /* 动画速度曲线 */
            animation-timing-function: ease;
            /* 动画开始时间 */
            animation-delay: 1s;
            /* 动画播放次数 */
            /* animation-iteration-count: 2; */
            /* 动画播放方向 */
            /* animation-direction: alternate; */
            /* 动画结束后状态 */
            animation-fill-mode: forwards;
        }
        div:hover {
            animation-play-state: paused;
        }

 四、 动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
   animation: name duration timing-function delay iteration-count direction fill-mode

注：

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