溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“運用css3動畫需要用到什么規則”，在日常操作中，相信很多人在運用css3動畫需要用到什么規則問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”運用css3動畫需要用到什么規則”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS3 @keyframes 規則
標簽定義及使用說明
使用@keyframes規則，你可以創建動畫。
創建動畫是通過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中，您可以更改CSS樣式的設定多次。
指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當動畫完成。（推薦學習：CSS3視頻教程。）為了獲得最佳的瀏覽器支持，您應該始終定義為0％和100％的選擇器。
注意: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。.
語法
@keyframes animationname {keyframes-selector {css-styles;}}值說明animationname 必需的。定義animation的名稱。keyframes-selector
必需的。動畫持續時間的百分比。
合法值：
0-100%from (和0%相同)to (和100%相同)
注意： 您可以用一個動畫keyframes-selectors。
css-styles 必需的。一個或多個合法的CSS樣式屬性
實例：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS3</title> <style> div { width:100px; height:100px; background:blue; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% {top:0px; background:blue; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; background:blue; width:100px;} 100% {top:200px; background:yellow; width:300px;} } </style></head><body><p><strong>注意:</strong> @keyframes 規則不兼容 IE 9 以及更早版本的瀏覽器.</p><div></div></body></html>到此，關于“運用css3動畫需要用到什么規則”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
