下面給大家介紹CSS動(dòng)畫方面的知識(shí)，動(dòng)畫一般用在移動(dòng)端多一些，有了動(dòng)畫會(huì)讓用戶有更好的用戶體驗(yàn)。下面具體介紹一下：
animation animation-name:動(dòng)畫名稱
animation-duration:動(dòng)畫時(shí)間
animation-delay:動(dòng)畫延遲
animation-direction:alternate;先正運(yùn)動(dòng)后反向運(yùn)動(dòng) ，reverse從反向開始運(yùn)行動(dòng)畫alternate-reverse先反向運(yùn)動(dòng)后正向運(yùn)動(dòng)（要求：animation-iteration-count：n,n大于一）
animation-fill-mode:forwards 最后一幀
animation-iteration-count:infinite無限循環(huán)播放動(dòng)畫.動(dòng)畫播放的次數(shù) 不可為負(fù)值. 可以用小數(shù)定義循環(huán)(0.5 將播放動(dòng)畫到關(guān)鍵幀的一半（from 0 ~ 50%).
animation-timing-function:設(shè)置動(dòng)畫運(yùn)行速度曲線
animation-play-state:paused|running設(shè)置播放與暫停
把a(bǔ)nimation-timing-function:的屬性值換成steps(n,start)就表示幀動(dòng)畫，n代表的是分的步驟，例如：
div{
width:100px;
height:100px;
background:red;
animation-duration:2s;
animation-timing-function:steps(5,start);
@keyframe donghua{
0%{
background:red;
}
100%{
background:green;
}
就說明在兩秒的時(shí)間內(nèi)把轉(zhuǎn)換的內(nèi)容分成五段來展現(xiàn)，而且是直接到下一段，中間沒有過渡的時(shí)間。
下面是一個(gè)例子：
css代碼：.div1{
margin: 150px 400px;
width: 200px;
border: 1px solid red;
height: 200px;
background: red;
animation: mgc 10s infinite;
animation-direction:alternate-reverse;
/* animation-fill-mode:forwards; */
transform-origin: 150% 150%;
animation-timing-function:cubic-bezier(0, 2.48, 1,-1.46);
}
.div1:hover{
animation-play-state:paused;
}
@keyframes mgc{
0%{
background-color: red;
transform: rotate(0deg);
}
10%{
background-color: yellow;
transform: rotate(36deg);
}
20%{
background-color: blue;
transform: rotate(72deg);
}
30%{
background-color: green;
transform: rotate(108deg);
}
40%{
background-color: cyan;
transform: rotate(144deg);
}
50%{
background-color: yellowgreen;
transform: rotate(180deg);
}
60%{
background-color: purple;
transform: rotate(216deg);
}
70%{
background-color: pink;
transform: rotate(252deg);
}
80%{
background-color: gray;
transform: rotate(288deg);
}
90%{
background-color: yellowgreen;
transform: rotate(324deg);
}
100%{
background-color: green;
transform: rotate(360deg);
}
}
.div2{
width:140px;
height: 140px;
overflow: hidden;
background: url(754767-20160601000042992-1734972084.png);
background-position: 0 0;
animation: name 1s steps(11,start) infinite;
margin: 30px auto;
/* border: 1px solid red; */
}
@keyframes name{
0%{
background-position: 0px 0;
}
100%{
background-position: -1540px 0;
}
}
下面是截的圖：
今天就這些了希望有所幫助
