字css3中，動畫著重要說的就是：transition屬性，表示過渡

(1)

如何定義一個動畫：

如需在 CSS3 中創建動畫，您需要學習 @keyframes 規則。

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;//為這個div附加一個動畫 名字為myfirst

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@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;}

}

@-moz-keyframes myfirst /* Firefox */

{

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;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

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;}

}

@-o-keyframes myfirst /* Opera */

{

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;}

}

注釋：本例在 Internet Explorer 中無效。

如何創建一個過渡

div

{

width:100px;

height:100px;

background:yellow;

transition-property:width;

transition-duration:1s;

transition-timing-function:linear;

transition-delay:2s;

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

-moz-transition-delay:2s;

/* Safari and Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:1s;

-o-transition-timing-function:linear;

-o-transition-delay:2s;

}

div:hover

{

width:200px;

}

請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。

注釋：本例在 Internet Explorer 中無效。

注釋：這個過渡效果會在開始之前等待兩秒。

總結

以上是生活随笔為你收集整理的在html中加动画效果,html5中css3新添加的动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。