CSS3 动画

 

CSS3 动画

通过CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash动画以及Javascript。

CSS3 @keyframes规则

如果在CSS3中创建动画,你需要学习@keyframes规则。

@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式,就能创建有当前样式逐渐改为新样式的动画效果。

浏览器支持

属性 浏览器支持
@keyframes          
animation          

IE10、Firefox以及Opera支持@keyframes规则和animation属性。

Chrome和Safari需要加前缀-wekit-.

注释:IE9,以及更早的版本,不支持@keyframe规则和animation属性。

 

CSS3 动画

当你在@keyframes中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少一下两项CSS3动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长

把‘myfirst’动画绑定到div元素,时长:5s:

        @keyframes myfirst {
            from {
                background:red;
            }
            to {
                background:blue;
            }
        }
        div.keyframesOne {
            animation:myfirst 5s;
            width:100px;
            height:100px;
            border:1px solid red;
        }

注释:你必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是0;

 

什么是CSS3中的动画?

动画时使元素从一种样式逐渐变化为另一种样式的效果。

你可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间,或用关键词‘from’和‘to’,等同于0%和100%;

0%是动画的开始,100%是动画的完成。

为了得到最佳的浏览器支持,你应该始终定义0%和100%选择器。

实例1:

        @keyframes myfirst {
            0% {
                background:red;
            }
            25% {
                background:yellow;
            }
            50% {
                background-color:blue;
            }
            100% {
                background-color:green;
            }
        }
        div.keyframesOne {
            width: 100px;
            height: 100px;
            animation: myfirst 4s;
            border: 2px inset black;
        }

实力2:

        @keyframes myfirst {
            0% {
                background:red;left:0px;top:0px;
            }
            25% {
                background:yellow;left:200px;top:0px;
            }
            50% {
                background:blue;left:200px;top:200px;
            }
            75% {
                background:green;left:0px;top:200px;
            }
            100% {
                background:red;left:0px;top:0px;
            }
        }
        div.keyframesOne {
            width: 100px;
            height: 100px;
            border: 2px double blue;
            position: absolute;
            animation: myfirst 4s;
        }

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

实例1:

        @keyframes myfirst {
            from {
                background-color:red;
            }
            to {
                background-color:blue;
            }
        }
        div.animationOne {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
        }

实例2:

        @keyframes myfirst {
            0% {
                left:0px;background:red;
            }
            25% {
                left:100px;background:blue;
            }
            100% {
                left:200px;background:green;
            }
        }
        div.keyframesOne {
            width:100px;
            height:100px;
            position:absolute;
            border:1px dotted black;
            animation:myfirst 5s linear 2s infinite alternate;
        }

CSS3 动画,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。