CSS3动画

在css3中，一般创建动画需要使用animation实现，使用简写属性，将动画与div元素绑定。

 

animation可用于设置六个动画属性：

* animation-name：规定需要绑定到选择器的 keyframe 名称；

* animation-duration：规定完成动画所花费的时间，以秒或毫秒计算；

* animation-timing-function：规定动画的速度曲线;

* animation-delay：规定在动画开始之前的延迟；

* animation-iteration-count：规定动画应该播放的次数；

* animation-direction：规定是否应该轮流反向播放动画；

例如：animation：changeColor 2s linear infinite

 

这里需要学习 @keyframes 规则，在@keyframes 中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。

在IE10、FireFox以及Opera支持 @keyframes 规则和 animation 属性；

在Chrome和Safari中需要前缀 -webkit-；

IE9以及更早版本，不支持 @keyframes 规则或 animation 属性

@keyframes myFirst
{
from {background：red}
to {background：yellow}
}

@-moz-keyframes myFirst /* Firefox */
{
from {background：red}
to {background：yellow}
}

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

挡在@keyframes中创建动画时，需要把它绑定到某个选择器，否则不会产生动画效果。

实例：吧“myFirst”动画绑定到div元素，时长5s

div
{
animation：myFirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

实例一：实现上下跳动小图标动效

.hot{
animation：run 0.6s linear infinite;
}

@keyframes run{
0% {transform: translateY(0)}
50% {transform: translateY(45%)}
100 {transform: translateY(0)}
}

实例二：实现按钮背景颜色跳动动效

btn{
animation：changeColor 1s linear infinite;
}

@keyframes changeColor{
          0% {
            background:rgb(244,121,1)
          }
          49.9% {
            background:rgb(244,121,1)
          }
          50% {
            background:rgb(250,176,70)
          }
          100% {
            background:rgb(250,176,70)
          }
        }