一真椿、Animation 常用屬性
@keyframes 裝飾器
animation-name 動(dòng)畫名稱 string
animation-duration 動(dòng)畫完成一次所需時(shí)間 time
animation-timing-function 動(dòng)畫曲線 linear ~ ease ~ ease-in ~ ease-out ~ ease-in-out ~ cubic-bezier(n,n,n,n)
animation-delay 延遲時(shí)間 time
animation-iteration-count 動(dòng)畫播放次數(shù) n/infinite
animation-direction 規(guī)定動(dòng)畫在下一周期逆向播放 normal/alternate
animation-play-state 暫秃醭危或播放動(dòng)畫 paused/running //js中控制該屬性
animation-fill-mode 規(guī)定動(dòng)畫時(shí)間之外的狀態(tài) none 默認(rèn)動(dòng)畫結(jié)束后回歸最初狀態(tài)/ forwards（動(dòng)畫結(jié)束后應(yīng)用最末狀態(tài)） / backwards動(dòng)畫開始前應(yīng)用最初狀態(tài) / both 兩者都兼用
簡(jiǎn)寫：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
animation: animation-name animation-duration animation-delay animation-timing-function animation-iteration-count animation-direction, animation-name2 支持多動(dòng)畫; //delay 可省略
eg: 動(dòng)態(tài)彈框
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul,li{
list-style: none;
}
@keyframes myMode {
0% {
top: -100%;
}
25% {
top: 60%;
}
50% {
top: 48%;
}
75% {
top: 52%;
}
100%{
top: 50%;
}
}
.box{
width: 200px;
height: 200px;
position: absolute;
left: 45%;
background: red;
animation: myMode 2s 1s cubic-bezier(0.25, 0.85, 1, 1) 1 forwards;
}
</style>
</head>
<body>
<div class="box">我是彈框</div>
</body>
</html>