css如何设置动画,css3如何设置动画？css设置简单动画的方法
css3如何設(shè)置動畫？本篇文章給大家?guī)淼膬?nèi)容是介紹css3設(shè)置簡單動畫的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。
首先我們來了解一下css3實現(xiàn)簡單動畫需要用到的屬性：animation屬性，@keyframes “規(guī)則”。
animation屬性和@keyframes “規(guī)則”是css3新增的屬性，animation屬性可用來給動畫設(shè)置許多的CSS樣式，例如color，background-color， height，或width。【推薦視頻學(xué)習(xí)：css3教程，了解更多css3屬性】
我們先通過@keyframes “規(guī)則”定義，再在animation屬性里調(diào)用，就可以實現(xiàn)一個簡單的動畫效果了。
如下所示：實現(xiàn)背景顏色的不斷切換.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
運行后，背景顏色會不斷的進行變化，在#001F3F顏色值到#FF4136顏色值過渡變化，之間也會顯示一些過渡的背景色。大家可以自己動手試試效果。
每個@keyframes規(guī)則定義了在動畫期間中的特定時刻應(yīng)該發(fā)生的事情。例如，0％是動畫的開頭，100％是結(jié)束。然后可以通過速記animation屬性或其八個子屬性來控制這些關(guān)鍵幀，以更好地控制應(yīng)如何操縱這些關(guān)鍵幀。
下面我們來看看animation屬性的子屬性有哪些？有什么作用？
1、animation-name：聲明@keyframes要操作的at-rule 的名稱。
2、animation-duration：動畫完成一個循環(huán)所需的時間長度。
3、animation-timing-function：建立預(yù)設(shè)的加速度曲線，如ease或linear。
4、animation-delay：正在加載的元素和動畫序列的開始之間的時間。
5、animation-direction：設(shè)置循環(huán)后動畫的方向。它的默認值在每個周期重置。
6、animation-iteration-count：動畫應(yīng)執(zhí)行的次數(shù)。
7、animation-fill-mode：設(shè)置在動畫之前/之后應(yīng)用的值。
例如，我們可以將動畫的最后狀態(tài)設(shè)置為保留在屏幕上，也可以將其設(shè)置為在動畫開始之前切換回。
8、animation-play-state：暫停/播放動畫。
然后可以像這樣使用這些子屬性：@keyframes stretch {
/* 在這里聲明動畫的動作 */
}
.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
相同：
*/
.element {
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
以下是每個子屬性可以采用的完整列表：
多個步驟
如果動畫具有相同的起始和結(jié)束屬性，則逗號分隔內(nèi)部的0％和100％值很有用@keyframes：@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}
多個動畫
我們可以用逗號分隔值以在選擇器上聲明多個動畫。在下面的例子中，我們想要改變圓圈的顏色，@keyframe同時也用另一個方向從一側(cè)到另一側(cè)輕推它。.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}
在我們設(shè)置動畫時，為了讓動畫效果更自然，實現(xiàn)更多效果，可以和css3的其他屬性連用。比如：
1、transform: translate()
2、transform: scale()
3、transform: rotate()
4、opacity
css3動畫的兼容性
希望盡可能多地兼容舊版瀏覽器，我們需要使用一些前綴：.element {
-webkit-animation: KEYFRAME-NAME 5s infinite;
-moz-animation: KEYFRAME-NAME 5s infinite;
-o-animation: KEYFRAME-NAME 5s infinite;
animation: KEYFRAME-NAME 5s infinite;
}
@-webkit-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
總結(jié)：以上就是本篇文的全部內(nèi)容，大大家可以自己動手試試，查看效果，加深理解，希望能對大家的學(xué)習(xí)有所幫助。
總結(jié)
以上是生活随笔為你收集整理的css如何设置动画,css3如何设置动画？css设置简单动画的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： FLTK中的字体
- 下一篇： matplotlib之简单动画制作