css動畫總結

<! DOCTYPE html >

< html lang= "en" >

< head >

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >Document </ title >

< style >

* {

margin: 0;

padding: 0;

}

#box {

height: 100px;

width: 100px;

background: green;

transition: transform 1s ease-in 1s;

}

#box:hover {

transform: rotate( 180deg) scale( .5, .5);

}

/*

transition: property duration timing-function delay;

屬性名字 完成動畫的時間 動畫的曲線 定義的效果什麼時候開始的

transition：須要事件觸發，只能定義一個屬性的變化，不能涉及多個屬性

*/

.box {

height: 100px;

width: 100px;

border: 15px solid black;

animation: changebox 1s ease-in-out 1s infinite alternate running forwards;

}

.box:hover {

animation-play-state: paused;

}

@keyframes changebox {

10% {

background: red;

}

50% {

width: 80px;

}

70% {

border: 15px solid yellow;

}

100% {

width: 180px;

height: 180px;

}

}

/* animation： 名稱 動畫時間 動畫的曲線 動畫什麼時候開始 動畫的次數 動畫的方向*/

< / style >

<!--

animation：動畫的疊加

transition：單一動畫

transform：縮放

translate:移動

-->

</ head >

< body >

< div class= "box" ></ div >

</ body >

</ html >

< script >

< / script >