添加CSS动画

@keyframes设置动画规则

1、@keyframes的作用是设置一个规则，在这个规则内指定CSS样式，并且指定动画的变化方式
2、规则内可以使用from{}、to{}关键字来设置样式变化，也可以使用百分比设置样式变化

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes myfirst
{
    0%{background: red;}
    50% {background: yellow;}
}

 /* Safari 与 Chrome */
@-webkit-keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

将动画规则绑定到选择器

1、@kayframes创建完成动画规则后，需要将动画的名字绑定到一个选择器上
2、需要在选择器上至少绑定动画的两个属性（动画的名称、动画的时常）

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

动画的其他属性

animation：表示所有动画属性的简写属性，一般用来定义动画名称和完成一个动画周期的时间
animation-name：定义动画的名称
animation-duration：定义动画完成一个周期花费的时间，默认是0
animation-timing-function：定义动画的速度曲线

• linear：从头到尾相同速度完成动画
• ease：默认，动画以低速开始，然后加快速度，在结束前变慢
• ease-in：动画以低速开始
• ease-out：动画以低速结束
• ease-in-out：动画以低速开始和结束
• steps(int,start|end)：第一个参数指定函数的间隔数，第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续

animation-fill-mode：动画不播方式的样式
animation-delay：动画开始前的等待时间，默认是0
animation-iteration-count：动画播放的次数，默认是1,infinite播放无数次
animation-direction：动画是否需要在下一周期逆向播放

• normal：默认正常播放
• reverse：反向播放
• alternate：奇数次反向播放，偶数次正向播放
• alternate-reverse：奇数次正向播放，偶数次反向播放

animation-play-state：动画是否正在运行

动画无效的情况

添加动画后，出现了动画无效的情况，这时需要确认以下情况：
1、动画需要设置在块级元素或者display: inline-block;的元素上
2、检查浏览器兼容，比如低版本的Safari 与 Chrome浏览器可以使用-webkit-前缀