动画

使用过度,可以实现绝大多数的效果,但是需要对效果进行定制时,可以通过动画animation来实现

过渡的优缺点

• transition的优点在于简单易用，但是它有几个很大的局限。

1. transition需要事件触发，所以没法在网页加载时自动发生。
2. transition是一次性的，不能重复发生，除非一再触发。
3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
   CSS Animation就是为了解决这些问题而提出的。

语法

使用动画时,我们首先需要定义一组动画,在动画过程中我们可以对动画的步骤进行控制

• 定义动画:
  使用@keyFrames 关键字定义

/*动画名为:sevenColor
    开始背景为红色
    中途背景为橘色
    结束为黄色
*/
@keyframes changeColor{
            0%{background-color:red;}
            50%{background-color:orange;}
            100%{background-color:yellow;}
}    

/*动画名为:changeColor
   效果跟上面的一样,只是使用关键字
   from 开始
   to 结束
*/
@keyframes sevenColor{
            from{background-color:red;}
            50%{background-color:orange;}
            to{background-color:yellow;}
}   

/*动画名为:someProperty
   效果跟上面的一样,只是使用关键字
    添加了多个属性
*/
@keyframes someProperty{
            from{
                background-color:red;
                width:100px;
            }
            50%{
                background-color:orange;
                transform:rotate(100deg);
            }
            to{
                background-color:yellow;
                height:200px;
            }
}   

• 使用动画
  动画的使用 需要通过animation这个属性,他是一个复合属性,但是再添加子属性时,除时间外,顺序可以打乱

    /* 完整属性
    动画名
    animation-name: sevenColor; 
    持续时间
    animation-duration: 1s;
    动画播放完毕时的状态 (还原,结束值),一般是 固定次数的动画 配合使用
    animation-fill-mode: forwards;
    延迟时间
    animation-delay: 1s;
    动画次数(具体次数,或者无限次)
    animation-iteration-count: infinite;
    动画的播放过渡类型
    animation-timing-function: ease-in;
    动画状态 播放running 或者 暂停paused
    animation-play-state: running;
    动画的方向 正向 方向 正方,反向交替 方向,正向交替
        比如 动画为 大-小
            交替:大-小-大
    animation-direction: alternate;
            */
/* 复合写法 
    保证 第一个时间 是动画时间
        第二个时间 是延迟时间
        其余属性的位置可以任意写
        animationName 是动画名称的意思
*/
 
    animation: animationName 1s infinite  ease-in forwards 1s;

• 没有设置值 会使用 默认值