animation 動(dòng)畫animation 是動(dòng)畫，而 transition 是過(guò)渡，它們用法很相似，但實(shí)際又不大相同，可以說(shuō) animation 是 transition 的升級(jí)版，它可以創(chuàng)建一個(gè)持續(xù)的自動(dòng)執(zhí)行動(dòng)畫。 1. 官方定義animation 屬性是一個(gè)簡(jiǎn)寫屬性，它是下面屬性的縮寫： animation-name 注意：請(qǐng)始終規(guī)定 animation-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)播放動(dòng)畫了。 2. 解釋animation 是幾個(gè)屬性值的縮寫，我們定義一個(gè)動(dòng)畫通常使用 animation 就足夠了，如果想單獨(dú)改變動(dòng)畫的某些屬性可以使用單獨(dú)的動(dòng)畫屬性去改變，構(gòu)成一個(gè)動(dòng)畫的最基本屬性需要 一個(gè)@keyframes 和 duration。 3. 語(yǔ)法.demo{
animation: name duration timing-function delay iteration-count direction;
}屬性值說(shuō)明：
animation-direction 參數(shù)值詳解：
animation-fill-mode 參數(shù)值詳解
4. 兼容性
5. 實(shí)例
@keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ;
}效果圖
說(shuō)明：這是最簡(jiǎn)單的動(dòng)畫創(chuàng)建方式，使用 @keyframes 命名一個(gè)叫做 go 的動(dòng)畫，再為這個(gè)動(dòng)畫加上一個(gè) 2s 的持續(xù)時(shí)間 ，構(gòu)成了最簡(jiǎn)單的動(dòng)畫，但是它只播放一次。
@keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in;/*這里增加了動(dòng)畫函數(shù)*/
}效果圖
說(shuō)明：通過(guò)在 animation 增加第 3 個(gè)參數(shù) animation-timing-function 動(dòng)畫函數(shù)，它可以改變動(dòng)畫運(yùn)動(dòng)的速度曲線。
@keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s;/*這里增加了動(dòng)畫延遲時(shí)間 3 秒*/
}效果圖
說(shuō)明：動(dòng)畫延遲了 3 秒開(kāi)始再次執(zhí)行了。
動(dòng)畫延遲 3s 開(kāi)始播放，播放 2 次結(jié)束。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s ;/*播放 2 次結(jié)束*/
}效果圖
說(shuō)明：通過(guò)效果圖可以很清楚的看到了動(dòng)畫反復(fù)執(zhí)行了 2 次，值得注意的這個(gè) 3s 的延遲只針對(duì)第一次動(dòng)畫開(kāi)始前，在動(dòng)畫開(kāi)始之后重復(fù)循環(huán)的時(shí)候就不再起作用了。 動(dòng)畫延遲 3s 開(kāi)始播放，然后無(wú)限循環(huán)。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s infinite;/*無(wú)限次循環(huán)*/
}效果圖
說(shuō)明：通過(guò) infinite 動(dòng)畫在經(jīng)過(guò) 3s 的延遲之后開(kāi)始無(wú)限的循環(huán)了。
延續(xù)上面的例子，我們發(fā)現(xiàn)動(dòng)畫每次循環(huán)都是從開(kāi)始的位置開(kāi)始循環(huán)的，下面通過(guò)添加 animation-direction 來(lái)改變動(dòng)畫在循環(huán)過(guò)程中是否反向。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s infinite reverse;/*動(dòng)畫反向播放*/
}使用 alternate 屬性，讓動(dòng)畫在奇數(shù)時(shí)候正向播放，偶數(shù)時(shí)候反向播放。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s infinite alternate;
}效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s infinite;/*動(dòng)畫反向播放*/
}
.demo-1{
width:px;
height:px;
background: #000;
animation:go s ease-in s infinite reverse;/*動(dòng)畫反向播放*/
}
.demo-2{
width:px;
height:px;
background: #000;
animation:go s ease-in s infinite alternate;/*動(dòng)畫偶數(shù)反向播放*/
}
</style>
</head>
<body>
<h2>正常播放順序</h2>
<div class="demo"></div>
<h2>反向播放順序</h2>
<div class="demo-1"></div>
<h2>奇數(shù)正向播放偶數(shù)次反向播放</h2>
<div class="demo-2"></div>
</body>
</html>
單次動(dòng)畫使用 forwards 設(shè)置動(dòng)畫結(jié)束之后使用結(jié)束后的狀態(tài)作為樣式。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s forwards;
}在設(shè)置延遲之后元素中使用 backwards 設(shè)置動(dòng)畫的開(kāi)始的樣式。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s backwards;
}效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s ;/*動(dòng)畫反向播放*/
}
.demo-1{
width:px;
height:px;
background: #000;
animation:go s ease-in s forwards;
}
.demo-2{
width:px;
height:px;
background: #000;
animation:go s ease-in s backwards;
}
</style>
</head>
<body>
<h2>正常動(dòng)畫</h2>
<div class="demo"></div>
<h2>設(shè)置 forwards</h2>
<div class="demo-1"></div>
<h2>設(shè)置 backwards 注意觀察開(kāi)始</h2>
<div class="demo-2"></div>
</body>
</html>說(shuō)明：在鼠標(biāo)刷新瀏覽器我們看到本應(yīng)該 100px 寬度的元素是以 200px 開(kāi)始的，當(dāng)動(dòng)畫結(jié)束之后，回到了 100px。 both 在設(shè)置動(dòng)畫延遲情況下，元素使用開(kāi)始的狀態(tài)，并在整個(gè)動(dòng)畫結(jié)束之后使用結(jié)束之后的狀態(tài)。 @keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s both;
}效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes go{
from{
width:px;
}
to{
width:px
}
}
.demo{
width:px;
height:px;
background: #000;
animation:go s ease-in s ;/*動(dòng)畫反向播放*/
}
.demo-3{
width:px;
height:px;
background: #000;
animation:go s ease-in s both;
}
</style>
</head>
<body>
<h2>正常動(dòng)畫</h2>
<div class="demo"></div>
<h2>設(shè)置 both 注意觀察開(kāi)始和結(jié)束</h2>
<div class="demo-3"></div>
</body>
</html>6. 經(jīng)驗(yàn)分享
<div class="demo"> 往事不要再提<span>人生已多風(fēng)雨</span> </div> .demo{
cursor: pointer;
}
.demo>span{
display: none;
}
.demo:hover>span{
display: block;
animation: shows s forwards;
}
@keyframes shows {
from{
opacity: ;
}to{
opacity: ;
}
}效果圖
說(shuō)明： transition 不能實(shí)現(xiàn)（隱藏/顯示）之間的過(guò)渡效，原因是 diaplay:none 設(shè)置之后雖然元素在頁(yè)面中，但是這個(gè)標(biāo)簽不在瀏覽器的渲染進(jìn)程里面。如果這個(gè)元素屬性為 display：block 相當(dāng)于元素從新渲染出來(lái)，這時(shí)里面的 opacity: 0 到 1 就不起作用了。所以這里使用 animation 正好可以彌補(bǔ)這個(gè)問(wèn)題。 7. 小結(jié)
|
