1、transition功能
transition属性的使用方法：transition：property duration timing-function
其中property表示对哪个属性进行平滑过渡，duration表示多长时间完成属性值的平滑过渡，timing-function表示通过什么方法来
进行平滑过渡
多平滑过渡示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width="device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>测试</title> </head> <body> <div id="test"></div> <style> #test{ 500px; height:500px; background-color:yellow; /*css动画*/ transform:rotate(0); -webkit-transition:transform 0.5s linear,width 0.5s linear; -moz-transition:transform 0.5s linear,width 0.5s linear; -ms-transition:transform 0.5s linear,width 0.5s linear; -o-transition:transform 0.5s linear,width 0.5s linear; transition:transform 0.5s linear,width 0.5s linear; } #test:hover{ 200px; tranform:rotate(180deg); } </style> </body> </html>
2.animation功能
使用示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv=“content-type” content="text/html;charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>测试</title> </head> <body> <div id="test"></div> <style> /*animation动画*/ @-webkit-keyframes colorChange{ 0%{ background-color:deepskyblue; } 50%{ background-color:red; } 100%{ background-color:deepskyblue; } } #test{ 500px; height:500px; background-color:deepskyblue; } #test:hover{ animation-name:colorChange; animation-duration:1s; animation-timing-function:linear; } </style> </body> </html>
实现动画的方法：
