CSS动画分为Transition功能和Animations功能
Transition功能支持从一个属性值平滑过渡到另一个属性值:在样式代码中,如果使用Firefox浏览器,需要写成“-moz-transition”的形式;如果使用Opera浏览器,需要写成“-o-transition”形式;如果使用的是Safari或者是Chrome浏览器,需要写成“-webkit-transtion”形式。
transtion属性使用方法:transition:property duration timing-function
property表示要进行平滑过渡的属性,duration完成过渡的时间,timing-function表示通过什么方法完成过渡
同时过渡多个属性:property1 duration1 timing-function1,property2 duration2 timing-function2
不同属性之间用“,”隔开
Animations功能与Transitions功能相同,只是可以实现更复杂的动画。
Animations使用示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: red; } @-webkit-keyframes myPlay { 0%{ background-color:red ; } 50%{ background-color:green; } 100%{ background-color:red; } } div:hover{ -webkit-animation-name:myPlay ; -webkit-animation-duration:3s; -webkit-animation-timing-function: linear ; } </style> </head> <body> <div>演示</div> </body> </html>也可以实现多个属性值同时改变,例子如下:
div{ background-color: red; width:200px; height: 200px; } @-webkit-keyframes myPlay { 0%{ background-color:red ; width: 200px; } 50%{ background-color:green; width:300px; } 100%{ background-color:red; width: 200px; } } div:hover{ -webkit-animation-name:myPlay ; -webkit-animation-duration:3s; -webkit-animation-timing-function: linear ; }