溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css動畫的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css動畫的示例分析”這篇文章吧。
CSS3動畫是什么？
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。使用@keyframes規則，你可以創建動畫。
當在@keyframes創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
●規定動畫的名稱
●規定動畫的時長
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在-webkit-,-ms-或-moz-前的數字為支持該前綴屬性的第一個瀏覽器版本號。
1.png
@keyframes規則
語法
@keyframesanimationname{keyframes-selector{css-styles;}}
屬性值：
●animationname必需的。定義animation的名稱。
●keyframes-selector必需的。動畫持續時間的百分比。
合法值：
●0-100%
●from(和0%相同)
●to(和100%相同)
●css-styles必需的。一個或多個合法的CSS樣式屬性
說明：
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞"from"和"to"，等同于0%和100%。
0%是動畫的開始，100%是動畫的完成。
為了得到最佳的瀏覽器支持，您應該始終定義0%和100%選擇器。
css動畫示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove5sinfinite;
-webkit-animation:mymove5sinfinite;/*SafariandChrome*/
}
@keyframesmymove
{
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-keyframesmymove/*SafariandChrome*/
{
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>
<div></div>
</body>
</html>
以上是“css動畫的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
