您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 動畫

CSS3 動畫

此節有 201 人學習過     參與評論

CSS3 動畫

通過 CSS3,我們能夠創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

CSS3 動畫

CSS3 @keyframes 規則

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

@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。

瀏覽器支持

屬性 瀏覽器支持
@keyframes
animation

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注釋:Internet Explorer 9,以及更早的版本,不支持 @keyframe 規則或 animation 屬性。

實例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

CSS3 動畫

當您在 @keyframes 中創建動畫時,請把它捆綁到某個選擇器,否則不會產生動畫效果。

通過規定至少以下兩項 CSS3 動畫屬性,即可將動畫綁定到選擇器:

  • 規定動畫的名稱
  • 規定動畫的時長

實例

把 "myfirst" 動畫捆綁到 div 元素,時長:5 秒:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

親自試一試

注釋:您必須定義動畫的名稱和時長。如果忽略時長,則動畫不會允許,因為默認值是 0。

什么是 CSS3 中的動畫?

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同于 0% 和 100%。

0% 是動畫的開始,100% 是動畫的完成。

為了得到最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。

實例

當動畫為 25% 及 50% 時改變背景色,然后當動畫 100% 完成時再次改變:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

親自試一試

實例

改變背景色和位置:

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

親自試一試

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

下面的兩個例子設置了所有動畫屬性:

實例

運行名為 myfirst 的動畫,其中設置了所有動畫屬性:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

親自試一試

實例

與上面的動畫相同,但是使用了簡寫的動畫 animation 屬性:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

親自試一試

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (201人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 乱理片最新乱理片2018| 奇米影视亚洲狠狠色777| 中文字幕人妻不在线无吗视频| 超清无码一区二区三区| 体育生小鲜肉勃起videos| 2017亚洲日韩天堂av| 被一群男人玩得嗷嗷叫小说| 成年无码av片| 亲亲的时候为什么会哼唧| 麻豆剧果冻传媒在线播放| 和风韵犹存的熟妇乱爱| 日韩欧中文字幕精品| 久草自拍| 天天看学生视频| 污污汅18禁在线永久免费观看| 少妇下面流水添少妇p| 伦到高潮不断一女多男| 在线观看免费av网| 乱人伦中文视频在线| 小说区 图片区 综合区免费| >bibijones| 欧美老肥婆牲交VIDEOS| 俺来也俺去来最新| 老司机午夜视频十八福利| 国产真实自在自线免费精品| 苍井空AV网址在线观看| 小sao货水好多真紧h视频| 97人洗澡人人澡人人爽人人模| j8又粗又硬又大又爽又长网站| lolhentai| OLdman老年tv| http://www.clickcpn.com