溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css3動(dòng)畫(huà)定制規(guī)則的方法是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css3動(dòng)畫(huà)定制規(guī)則的方法是什么”吧！
css3動(dòng)畫(huà)用“@keyframes”來(lái)定制規(guī)則?！癅keyframes”可以指定動(dòng)畫(huà)規(guī)則，定義CSS動(dòng)畫(huà)的一個(gè)周期的行為，語(yǔ)法“@keyframes 動(dòng)畫(huà)名稱(chēng){keyframes-selector {css-styles;}}”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
@keyframes是CSS3的一種規(guī)則，可以用來(lái)定義CSS動(dòng)畫(huà)的一個(gè)周期的行為，可以創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)。
@keyframes規(guī)則里是由一組封裝的CSS樣式規(guī)則組成的，這些規(guī)則描述了屬性值如何隨時(shí)間變化。
@keyframes animation-name {keyframes-selector {css-styles;}}keyframes-selector：定義動(dòng)畫(huà)的百分比，它介于0％到100％之間。一個(gè)動(dòng)畫(huà)可以包含許多選擇器。
然后，使用不同的CSS animation（動(dòng)畫(huà)）屬性，可以控制動(dòng)畫(huà)的許多不同方面，包括動(dòng)畫(huà)迭代的次數(shù)，是否在開(kāi)始和結(jié)束值之間交替，以及動(dòng)畫(huà)是否應(yīng)該運(yùn)行或暫停。動(dòng)畫(huà)也可以延遲其開(kāi)始時(shí)間。
@keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，后面接著是給出動(dòng)畫(huà)名稱(chēng)的標(biāo)識(shí)符（將使用animation-name引用），隨后是通過(guò)一組樣式規(guī)則（用大括號(hào)分隔）。然后，通過(guò)使用標(biāo)識(shí)符作為animation-name屬性的值，將動(dòng)畫(huà)應(yīng)用于元素。
語(yǔ)法：
/* 定義動(dòng)畫(huà)*/
@keyframes 動(dòng)畫(huà)名稱(chēng){
/* 樣式規(guī)則*/
}
/* 將它應(yīng)用于元素 */
.element {
animation-name: 動(dòng)畫(huà)名稱(chēng)（在@keyframes中已經(jīng)聲明好的）;
/* 或使用動(dòng)畫(huà)簡(jiǎn)寫(xiě)屬性*/
animation: 動(dòng)畫(huà)名稱(chēng) 1s ...
}在大括號(hào)中，我們需要定義關(guān)鍵幀或航點(diǎn)，這些關(guān)鍵幀或航點(diǎn)指定在動(dòng)畫(huà)期間的特定點(diǎn)處正在動(dòng)畫(huà)化的屬性的值。這允許我們控制動(dòng)畫(huà)序列中的中間步驟。
例如，一個(gè)簡(jiǎn)單動(dòng)畫(huà)的@keyframe可以是這樣：
@keyframes change-bg-color {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100%{
background-color: red;
}
}
.demo{
-webkit-animation:change-bg-color 5s infinite;
animation: change-bg-color 5s infinite;
}
'0％'、‘50%’、'100％'都是關(guān)鍵幀選擇器，每個(gè)選擇器定義一個(gè)關(guān)鍵幀規(guī)則。關(guān)鍵幀規(guī)則的關(guān)鍵幀聲明塊由屬性和值組成。
上述動(dòng)畫(huà)類(lèi)似于簡(jiǎn)單的過(guò)渡效果：背景顏色從動(dòng)畫(huà)開(kāi)頭的一個(gè)值（0％）開(kāi)始變化，在中間達(dá)到一個(gè)值（50%），在動(dòng)畫(huà)結(jié)束時(shí)達(dá)到另一個(gè)值（100％）?！?％”、”50％”和“100％”關(guān)鍵幀選擇器定義了希望動(dòng)畫(huà)屬性更改值的航點(diǎn)或百分點(diǎn)。我們也可以使用選擇器關(guān)鍵字 from，to而不是分別使用0％和100％，它們是等效的。
@keyframes change-bg-color {
from{
background-color: red;
}
50% {
background-color: blue;
}
to{
background-color: red;
}
}關(guān)鍵幀選擇器由一個(gè)或多個(gè)以逗號(hào)分隔的百分比值或from和to關(guān)鍵字組成。請(qǐng)注意，百分比單位說(shuō)明符必須用于百分比值。因此，'0'是無(wú)效的關(guān)鍵幀選擇器。
以下是具有關(guān)鍵幀選擇器的動(dòng)畫(huà)示例，其中包括多個(gè)以逗號(hào)分隔的百分比值和/或關(guān)鍵字關(guān)鍵幀選擇器from和to。
@keyframes bouncing {
0%, 50%, 100% { /* 或者 from, 50%, to */
top: 0;
}
25%, 75% {
top: 100px;
}
}上面的@keyframes規(guī)則定義：元素的頂部偏移量在開(kāi)始時(shí)，中途和動(dòng)畫(huà)結(jié)束時(shí)將等于零，并且它將四分之一和四分之三路徑時(shí)等于100px; 這意味著元素在動(dòng)畫(huà)循環(huán)中上下移動(dòng)了好幾次。
css @keyframes指定動(dòng)畫(huà)規(guī)則示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/* Safari and Chrome */
}
@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;
}
}
@-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;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
感謝各位的閱讀，以上就是“css3動(dòng)畫(huà)定制規(guī)則的方法是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css3動(dòng)畫(huà)定制規(guī)則的方法是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼