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 >