第一部分:Transition
transition的各項屬性:
transition的完整寫法如下。
這其實是一個簡寫形式,可以單獨定義成各個屬性。
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
transition的作用在于,指定狀态變化所需要的時間。
img{
height:15px;
width:15px;
}
img:hover{
height: 450px;
width: 450px;
}
img{
transition:1s;
}
可以指定transition适用的屬性,比如隻适用于height。
img{
transition:1s height;//
隻有height的變化需要1秒實作,其他變化(主要是width)依然瞬間實作
}
transition-delay屬性 表示延時加載
在同一行transition語句中,可以分别指定多個屬性
img{
transition: 1s height, 2s 1s width;//width在1秒之後,再開始變化,也就是延遲(delay)1秒,2s内完成
}
注意:delay的真正意義在于,它指定了動畫發生的順序,使得多個不同的transition可以連在一起,形成複雜效果。
transition-timing-function 屬性
transition的狀态變化速度(又稱timing function),預設不是勻速的,而是逐漸放慢,這叫做ease。
img{
transition: 1s ease;
}
其屬性值:
(1)linear:勻速
(2)ease-in:加速
(3)ease-out:減速
(4)cubic-bezier函數:自定義速度模式
最後那個cubic-bezier,可以使用工具網站來定制。用法:
img{
transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}
transition的使用注意:
(1)目前,各大浏覽器(包括IE 10)都已經支援無字首的transition,是以transition已經可以很安全地不加浏覽器字首。
(2)不是所有的CSS屬性都支援transition,完整的清單檢視這裡,以及具體的效果。
(3)transition需要明确知道,開始狀态和結束狀态的具體數值,才能計算出中間狀态。比如,height從0px變化到100px,transition可以算出中間狀态。但是,transition沒法算出0px到auto的中間狀态,也就是說,如果開始或結束的設定是height: auto,那麼就不會産生動畫效果。類似的情況還有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。
transition的局限
transition的優點在于簡單易用,但是它有幾個很大的局限。
(1)transition需要事件觸發,是以沒法在網頁加載時自動發生。
(2)transition是一次性的,不能重複發生,除非一再觸發。
(3)transition隻能定義開始狀态和結束狀态,不能定義中間狀态,也就是說隻有兩個狀态。
(4)一條transition規則,隻能定義一個屬性的變化,不能涉及多個屬性。
CSS Animation就是為了解決這些問題而提出的。
第二部分:Animation
1.首先,CSS Animation需要指定動畫一個周期持續的時間,以及動畫效果的名稱。
div:hover {
animation: 1s rainbow;
}
上面代碼表示,當滑鼠懸停在div元素上時,會産生名為rainbow的動畫效果,持續時間為1秒。為此,我們還需要用keyframes關鍵字,定義rainbow效果。
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
預設情況下,動畫隻播放一次。加入infinite關鍵字,可以讓動畫無限次播放。
div:hover {
animation: 1s rainbow infinite;//動畫無限次播放
}
也可以指定動畫具體播放的次數,比如3次
animation: 1s rainbow 3;
心髒跳動的例子,可供參考^^
animation-fill-mode屬性
動畫結束以後,會立即從結束狀态跳回到起始狀态。如果想讓動畫保持在結束狀态,需要使用animation-fill-mode屬性。
其他屬性值:
1)none:預設值,回到動畫沒開始時的狀态。
(2)backwards:讓動畫回到第一幀的狀态。
(3)both: 根據animation-direction(見後)輪流應用forwards和backwards規則。
div:hover{
animation: 2s rowsd forwards;
}
animation-direction屬性------表示動畫循環播放時,每次都是從結束狀态跳回到起始狀态,再開始播放。animation-direction屬性,可以改變這種行為。
預設情況是,animation-direction等于normal。
屬性值:normal/reverse
下面看一個例子,來說明如何使用animation-direction。假定有一個動畫是這樣定義的。
@keyframes rainbow {
0% { background-color: yellow; }
100% { background: blue; }
}
div:hover {
animation: 1s rainbow 3 normal;//normal正常執行,先yellow,再blue
}
對于屬性值為 reverse
animation: 2s rowsd 3 reverse;
/*reverse倒叙執行顔色,先執行blue,再執行yellow*/
animation的各項屬性
同transition一樣,animation也是一個簡寫形式。
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
可以分解成各個單獨的屬性。
div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
keyframes的寫法
keyframes關鍵字用來定義動畫的各個狀态,它的寫法相當自由。
@keyframes rainbow { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen } }
0%可以用from代表,100%可以用to代表,是以上面的代碼等同于下面的形式。
例如:
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
注意:另外一點需要注意的是,浏覽器從一個狀态向另一個狀态過渡,是平滑過渡。steps函數可以實作分步過渡。
div:hover {
animation: 1s rainbow infinite steps(10);
}
神奇的例子,可以看到steps函數的用處。
animation-play-state屬性
有時,動畫播放過程中,會突然停止。這時,預設行為是跳回到動畫的開始狀态。
如果想讓動畫保持突然終止時的狀态,就要使用animation-play-state屬性。
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
@keyframes 動畫名 浏覽器字首
目前,IE 10和Firefox(>= 16)支援沒有字首的animation,而chrome不支援,是以必須使用webkit字首。
項目中代碼寫法必須為 如下所示:
div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
詳細學習位址;http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
轉載效果:https://blog.csdn.net/erdouzhang/article/details/71402747
旋轉效果demo 代碼:
h3{
100px;
height: 100px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 100px;
margin:100px 0;
}
h3 span{
display: inline-block;
30px;
height: 30px;
border-radius: 15px;
background-color: #fff;
}
h3:hover span{
animation: lxs 2s linear infinite;
-webkit-animation:lxs 2s linear infinite;
}
@keyframes lxs{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
@-webkit-keyframes lxs{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}