CSS3 中的@keyframes介紹
我要評(píng)論語(yǔ)法
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定義動(dòng)畫(huà)的名稱(chēng)。
keyframes-selector
必需。動(dòng)畫(huà)時(shí)長(zhǎng)的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles 必需。一個(gè)或多個(gè)合法的 CSS 樣式屬性。
定義和用法
通過(guò) @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫(huà)。
創(chuàng)建動(dòng)畫(huà)的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動(dòng)畫(huà)過(guò)程中，您能夠多次改變這套 CSS 樣式。
以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。
0% 是動(dòng)畫(huà)的開(kāi)始時(shí)間，100% 動(dòng)畫(huà)的結(jié)束時(shí)間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
注釋?zhuān)赫?qǐng)使用動(dòng)畫(huà)屬性來(lái)控制動(dòng)畫(huà)的外觀，同時(shí)將動(dòng)畫(huà)與選擇器綁定。
目前瀏覽器都不支持 @keyframes 規(guī)則。
Firefox 支持替代的 @-moz-keyframes 規(guī)則。
Opera 支持替代的 @-o-keyframes 規(guī)則。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 規(guī)則。
例：
<!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 */
}</p> <p>@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;}
}</p> <p>@-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;}
}</p> <p>@-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;}
}</p> <p>@-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> <p><p><b>注釋?zhuān)?lt;/b>本例在 Internet Explorer 中無(wú)效。</p></p> <p><div></div></p> <p></body>
</html>
相關(guān)文章
詳解CSS動(dòng)畫(huà)屬性關(guān)鍵幀keyframes全解析
這篇文章主要介紹了詳解CSS動(dòng)畫(huà)屬性關(guān)鍵幀keyframes全解析的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-09CSS3 @keyframes簡(jiǎn)單動(dòng)畫(huà)實(shí)現(xiàn)
這篇文章主要介紹了CSS3 @keyframes簡(jiǎn)單動(dòng)畫(huà)實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-24CSS3中的@keyframes關(guān)鍵幀動(dòng)畫(huà)的選擇器綁定
@keyframes可以幫助我們進(jìn)行類(lèi)似Flash中的關(guān)鍵幀動(dòng)畫(huà)制作,這里我們來(lái)簡(jiǎn)單討論一下CSS3中的@keyframes關(guān)鍵幀動(dòng)畫(huà)的選擇器綁定,需要的朋友可以參考下2016-06-13@keyframes規(guī)則實(shí)現(xiàn)多重背景的CSS動(dòng)畫(huà)
這篇文章主要介紹了@keyframes規(guī)則實(shí)現(xiàn)多重背景的CSS動(dòng)畫(huà),代碼中使用的是效果圖中顯示的素材,僅作為腳本示例在此便不提供下載了,需要的朋友可以參考下2015-08-05
快速解決css使用@keyframes加載圖片首次循環(huán)時(shí)出現(xiàn)白色間隙問(wèn)題(閃屏)
這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時(shí)出現(xiàn)白色間隙問(wèn)題(閃屏),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以2020-02-25
