arrow{
right: 630rpx;
margin-top: -108rpx;
animation:myfirst 460ms;
}
@keyframes myfirst
{
from {right: 0rpx;}
to {right: 630rpx;}
}
代表的是在460ms之內(nèi)從樣式{right: 0rpx;}到樣式{right: 630rpx;}
.container {
animation-delay: .8s;
}
.outter {
animation-delay: 1.5s;
}
.inner {
animation-duration: 2.4s;
-webkit-animation-name: state1;
animation-name: state1;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes state1 {
0% {
opacity: .5;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(4.5);
transform: scale(4.5);
}
}
animation-delay 3s
等待三秒后進(jìn)行動(dòng)畫
animation-duration
為 @keyframes 動(dòng)畫規(guī)定一個(gè)名稱：始終規(guī)定 animation-duration 屬性，否則時(shí)長為 0诫惭，就不會播放動(dòng)畫了檩奠。
animation-name
為 @keyframes 動(dòng)畫規(guī)定一個(gè)名稱：
animation-timing-function
指定動(dòng)畫將如何完成一個(gè)周期桩了。
速度曲線定義動(dòng)畫從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r(shí)間。
速度曲線用于使變化更為平滑埠戳。
image.png
animation-iteration-count: value;
value：一個(gè)數(shù)字井誉，定義應(yīng)該播放多少次動(dòng)畫
