CSS3 - @keyframes

零下一度原創: 2017-06-29 11:54:071536瀏覽

語法

@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><style> 
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>

###### ###

以上是CSS3 - @keyframes的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JS實現自動輪播圖效果(自適應螢幕寬度+手機觸控螢幕滑動)_javascript技巧下一篇：JS實現自動輪播圖效果(自適應螢幕寬度+手機觸控螢幕滑動)_javascript技巧

看更多