CSS3 动画属性 登录

CSS3 动画属性

CSS3新增动画属性“@keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。

语法

@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。
合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。

定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

浏览器支持情况

目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: #ff72cc;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
        }
        @keyframes mymove {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

CSS3 动画

当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器:

规定动画的名称

规定动画的时长

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
            div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
        }
        @keyframes mymove {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
    </style>
</head>
<body>
  <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
  <div></div>
</body>
</html>

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    

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
           }
        @keyframes mymove {
            0% {
                top: 0px;
                left: 0px;
                background: red;
            }
            25% {
                top: 0px;
                left: 100px;
                background: blue;
            }
            50% {
                top: 100px;
                left: 100px;
                background: yellow;
            }
            75% {
                top: 100px;
                left: 0px;
                background: green;
            }
            100% {
                top: 0px;
                left: 0px;
                background: red;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
                left: 0px;
                background: red;
            }
            25% {
                top: 0px;
                left: 100px;
                background: blue;
            }
            50% {
                top: 100px;
                left: 100px;
                background: yellow;
            }
            75% {
                top: 100px;
                left: 0px;
                background: green;
            }
            100% {
                top: 0px;
                left: 0px;
                background: red;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
                left: 0px;
                background: red;
            }
            25% {
                top: 0px;
                left: 100px;
                background: blue;
            }
            50% {
                top: 100px;
                left: 100px;
                background: yellow;
            }
            75% {
                top: 100px;
                left: 0px;
                background: green;
            }
            100% {
                top: 0px;
                left: 0px;
                background: red;
            }
        }  
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
                left: 0px;
                background: red;
            }
            25% {
                top: 0px;
                left: 100px;
                background: blue;
            }
            50% {
                top: 100px;
                left: 100px;
                background: yellow;
            }
            75% {
                top: 100px;
                left: 0px;
                background: green;
            }
            100% {
                top: 0px;
                left: 0px;
                background: red;
            }
        }
    </style>
</head>
<body>
  <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
  <div></div>
</body>
</html>


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; /* Firefox */ -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ -o-animation: mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-moz-keyframes mymove /* Firefox */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-o-keyframes mymove /* Opera */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } </style> </head> <body> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送