CSS 动画

一些 css 属性是 可以有动画效果的 ，这意味着它们可以用于动画和过渡

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色

浏览器支持

下下表中的数字表示支持该方法的第一个浏览器的版本号

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀

范例

背景颜色逐渐地从红色变化到蓝色

@keyframes mymove
    {
    from {background-color:red;}
    to {background-color:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
    from {background-color:red;}
    to {background-color:blue;}
}

动画属性

一、过渡动画  （transition）

过渡动画，就是能让css样式的变化，体现的更明显一点，让用户能更清晰的看见样式的变化。过渡的实现我们一般通过事件来触发（例如鼠标单击、获得焦点、被点击或对元素任何改变中触发）

过渡相关的属性：

1. transition-property：检索或设置对象中的参与过渡的属性/*all为默认*/

2. transition-duration：检索或设置对象过渡的持续时间/*s或ms为单位*/

3. transition-delay：检索或设置对象延迟过渡的时间    /*同上*/

4. transition-timing-function：检索或设置对象中过渡的动画类型   /*控制过渡动画的速度类型  默认为ease-in-out（先加速后减速）;还有几种 linear(匀速) ease（平滑的过渡） ease-in(加速）ease-out（减速） */

大堆是不是很吓人，其实我们可以简写：例：transition:all 1s 3s linear;--->>all表示所有属性都参与过渡，并且持续时间为1s,延迟3s,匀速进行！

过渡属性添加的方式：给要参与过渡的元素添加即可。

不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

除了与过渡都能定义首尾状态以外，他们还有一个更大的相同点就是相关的属性也特别多

1.animation-name

 检索或设置对象所应用的动画名称

必须与规则@keyframes配合使用，

eg:@keyframes mymove{}  animation-name:mymove;

 2.animation-duration 

检索或设置对象动画的持续时间

 说明：animation-duration:3s;    动画完成使用的时间为3s

3.animation-timing-function 

  - 检索或设置对象动画的关键帧动画类型

  - 属性值

    - linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

    -  ease：平滑。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

    -  ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

    -  ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

    - ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

    - step-start:马上跳到动画每一结束桢的状态  【tips】可用来制作逐帧动画！

5.animation-delay

  + 检索或设置对象动画延迟的时间

  + 说明：animation-delay:0.5s;     动画开始前延迟的时间为0.5s)

6.animation-iteration-count 

  + 检索或设置对象动画的循环次数

  + 属性值

    + animation-iteration-count: infinite | number;

    + infinite：无限循环

    + number: 循环的次数

7.animation-direction 

  + 检索或设置对象动画在循环中是否反向运动

  + 属性值

    + normal：正常方向

    + reverse：反方向运行

    + alternate：动画先正常运行再反方向运行，并持续交替运行

    + alternate-reverse：动画先反运行再正方向运行，并持续交替运行

8.animation-play-state 

  + 检索或设置对象动画的状态

  + 属性值

    + animation-play-state:running | paused;

    +  running:运动

    + paused: 暂停

    + animation-play-state:paused;       当鼠标经过时动画停止，鼠标移开动画继续执行