CSS3 @keyframes 規則
實例
使一個div元素逐漸移動200像素:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
嘗試一下»
在此頁底部有更多的例子。
瀏覽器支持
属性 | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
標籤定義及使用說明
使用@keyframes規則,你可以創建動畫。
創建動畫是通過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中,您可以更改CSS樣式的設定多次。
指定的變化時發生時使用%,或關鍵字"from"和"to",這是和0%到100%相同。
0%是開頭動畫,100%是當動畫完成。
為了獲得最佳的瀏覽器支持,您應該始終定義為0%和100%的選擇器。
注意:使用animation屬性來控制動畫的外觀,還使用選擇器綁定動畫。.
語法
@keyframesanimationname {keyframes-selector {css-styles;}}
值 | 說明 |
---|---|
animationname | 必需的。 定義animation的名稱。 |
keyframes-selector | 必需的。 動畫持續時間的百分比。 合法值: 0-100% 注意:您可以用一個動畫keyframes-selectors。 |
css-styles | 必需的。 一個或多個合法的CSS樣式屬性 |
在線實例
實例
許多關鍵幀選擇器中添加一個動畫:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
嘗試一下»
實例
Change many CSS styles in one animation:
@keyframes mymove
{
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;}
}
{
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;}
}
嘗試一下»
實例
Many keyframe selectors with many CSS styles:
@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;}
}
@-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;}
}
{
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;}
}
嘗試一下»
相關文章
CSS3 tutorial: CSS3動畫