CSS3 動(dòng)畫(huà)
CSS3 動(dòng)畫(huà)
CSS3，我們可以創(chuàng)建動(dòng)畫(huà)，它可以取代許多網(wǎng)頁(yè)動(dòng)畫(huà)圖像，F(xiàn)lash動(dòng)畫(huà)，和JAVAScripts。
CSS3 @keyframes 規(guī)則
要?jiǎng)?chuàng)建CSS3動(dòng)畫(huà)，你將不得不了解@keyframes規(guī)則。
@keyframes規(guī)則是創(chuàng)建動(dòng)畫(huà)。 @keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫(huà)將逐步從目前的樣式更改為新的樣式。
CSS3 動(dòng)畫(huà)
當(dāng)在?@keyframes?創(chuàng)建動(dòng)畫(huà)，把它綁定到一個(gè)選擇器，否則動(dòng)畫(huà)不會(huì)有任何效果。
指定至少這兩個(gè)CSS3的動(dòng)畫(huà)屬性綁定向一個(gè)選擇器：
規(guī)定動(dòng)畫(huà)的名稱(chēng)規(guī)定動(dòng)畫(huà)的時(shí)長(zhǎng)
實(shí)例
把 "myfirst" 動(dòng)畫(huà)捆綁到 div 元素，時(shí)長(zhǎng)：5 秒：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>注意:?您必須定義動(dòng)畫(huà)的名稱(chēng)和動(dòng)畫(huà)的持續(xù)時(shí)間。如果省略的持續(xù)時(shí)間，動(dòng)畫(huà)將無(wú)法運(yùn)行，因?yàn)槟J(rèn)值是0。
運(yùn)行程序嘗試一下
CSS3動(dòng)畫(huà)是什么？
動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動(dòng)畫(huà)的開(kāi)始，100% 是動(dòng)畫(huà)的完成。
為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
實(shí)例
當(dāng)動(dòng)畫(huà)為 25% 及 50% 時(shí)改變背景色，然后當(dāng)動(dòng)畫(huà) 100% 完成時(shí)再次改變：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注釋?zhuān)?lt;/b>當(dāng)動(dòng)畫(huà)完成時(shí)，會(huì)變回初始的樣式。</p>
<p><b>注意:</b> 該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無(wú)效的。</p>
</body>
</html>運(yùn)行程序嘗試一下
實(shí)例
改變背景色和位置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div>css動(dòng)畫(huà)</div>
</body>
</html>運(yùn)行程序嘗試一下
CSS3的動(dòng)畫(huà)屬性
下面的表格列出了 @keyframes 規(guī)則和所有動(dòng)畫(huà)屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| @keyframes | 規(guī)定動(dòng)畫(huà)。 | 3 |
| animation | 所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規(guī)定 @keyframes 動(dòng)畫(huà)的名稱(chēng)。 | 3 |
| animation-duration | 規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 | 3 |
| animation-timing-function | 規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)。默認(rèn)是 "ease"。 | 3 |
| animation-delay | 規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0。 | 3 |
| animation-iteration-count | 規(guī)定動(dòng)畫(huà)被播放的次數(shù)。默認(rèn)是 1。 | 3 |
| animation-direction | 規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。默認(rèn)是 "normal"。 | 3 |
| animation-play-state | 規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 | 3 |
實(shí)例
運(yùn)行myfirst動(dòng)畫(huà)，設(shè)置所有的屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div>css動(dòng)畫(huà)</div>
</body>
</html>與上面的動(dòng)畫(huà)相同，但是使用了簡(jiǎn)寫(xiě)的動(dòng)畫(huà) animation 屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p>css 動(dòng)畫(huà)</p>
<div></div>
</body>
</html>程序運(yùn)行結(jié)果：
