CSS3 動(dòng)畫屬性
CSS3新增動(dòng)畫屬性「@keyframes」，從字面就可以看出其意義——關(guān)鍵幀，這與Flash中的意義一致。利用CSS3製作動(dòng)畫效果其原理與Flash一樣，我們需要定義關(guān)鍵影格處的狀態(tài)效果，由CSS3來驅(qū)動(dòng)產(chǎn)生動(dòng)畫效果。
語法
@keyframes?animationname {keyframes-selector {css-styles;}}
animationname 必要。定義動(dòng)畫的名稱。
keyframes-selector
必備。動(dòng)畫時(shí)長(zhǎng)的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles 必要。一個(gè)或多個(gè)合法的 CSS 樣式屬性。
定義和用法
透過?@keyframes?規(guī)則，您能夠建立動(dòng)畫。
創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸改變?yōu)榱硪惶讟邮健?
在動(dòng)畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時(shí)間，或透過關(guān)鍵字 "from" 和 "to"，等價(jià)於 0% 和 100%。
0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
註解：請(qǐng)使用動(dòng)畫屬性來控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。
瀏覽器支援狀況
目前瀏覽器都不支援?@keyframes?規(guī)則。
Firefox 支援替代的 @-moz-keyframes?規(guī)則。
Opera 支援替代的 @-o-keyframes?規(guī)則。
Safari 和 Chrome 支援替代的 @-webkit-keyframes?規(guī)則。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: #ff72cc;
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 */
}
@keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>CSS3 動(dòng)畫
當(dāng)在?@keyframes?建立動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。
指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定定向一個(gè)選擇器：
規(guī)定動(dòng)畫的名稱
規(guī)定動(dòng)畫的時(shí)長(zhǎng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
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 */
}
@keyframes mymove {
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
</style>
</head>
<body>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>CSS3的動(dòng)畫屬性
下面的表格列出了@keyframes 規(guī)則和所有動(dòng)畫屬性：
屬性? ? ? ??描述? ? ? ? ? ?CSS
@keyframes ? ?規(guī)定動(dòng)畫。 ? ?3 ? ?
animation ? ?所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。 ? ?3 ? ?
animation-name ? ?規(guī)定 @keyframes 動(dòng)畫的名稱。 ? ?3 ? ?
animation-duration ? ?規(guī)定動(dòng)畫完成一個(gè)週期所花費(fèi)的秒或毫秒。預(yù)設(shè)是 0。 ? ?3 ? ?
animation-timing-function ? ?規(guī)定動(dòng)畫的速度曲線。預(yù)設(shè)是 "ease"。 ? ?3 ? ?
animation-delay ? ?規(guī)定動(dòng)畫何時(shí)開始。預(yù)設(shè)是 0。 ? ?3 ? ?
animation-iteration-count ? ?規(guī)定動(dòng)畫被播放的次數(shù)。預(yù)設(shè)是 1。 ? ?3 ? ?
animation-direction ? ?規(guī)定動(dòng)畫是否在下一週期反向播放。預(yù)設(shè)是 "normal"。 ? ?3 ? ?
animation-play-state ? ?規(guī)定動(dòng)畫是否正在運(yùn)作或暫停。預(yù)設(shè)是 "running"。 ? ?3 ? ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
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 */
}
@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;
}
}
@-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;
}
}
@-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;
}
}
@-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><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>
