CSS3 animation（动画）属性

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

注意：Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

注意：

animation-name和animation-duration必须设置，其他可选

通常根据不同内核的浏览器要加上不同的前缀，比如：chrome、safari：@-webkit-keyframes

在CSS选择器中，使用animition动画属性

声明一个动画（关键帧）格式如下：

@keyframes name{
    from{
　　　　}
    to{
　　　　}
}

或

@keyframes name{
    0%{
　　　　}
    50%{
　　　　}
        100%{
       }
}

①每个阶段用百分比表示，从0%到100%

②起止必须设置，即0%和100%或者from和to

例子：用animation属性制作颜色不停变化的正方形

1、定义一个动画

@-webkit-keyframes myframe{
                0%{
                    background-color: #7FFFD4;
                }
                25%{
                    background-color: coral;
                }
                50%{
                    background-color: cornflowerblue;
                }
                100%{
                    background-color: cyan;
                }
            }

2、在网页添加div

<div class="div1"></div>

3、给div定义属性

.div1{
                width: 500px;
                height: 500px;
                background-color: #7FFFD4;
                -webkit-animation: myframe 5s ease infinite;
            }

完整实例

消除img图片与div下边界之间空白的三种方法|www.125jz.com

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1160.html