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