</head>
<style> div{ background-color:#FC0; /*transition:background-color 1s linear;*/ transition-property: background-color ;//动画执行的颜色 transition-duration:3s;//动画执行的时间 transition-timing-function:linear;//动画执行的方式 } div:hover{ background-color:#C36; } </style><body> <div>文字</div></body></html>同时执行多个动画效果
</head>
<style> div{ background-color:#FC0; color:#009; width:100px; /*同时执行多个动画效果*/ transition：transform 1s linear, color 3s linear,width 3s linear; } div:hover{ background-color:#C36; color:#0F9; width:200px; transform:rotate(360deg); } </style><body> <div>文字</div></body></html>Animations功能的动画
</head>
<style> div{ background-color:#FC0; } @-webkit-keyframes mycolor{ 0%{ background-color:#0F0; } 40%{ background-color:#006; } 70%{ background-color:#F93; } 100%{ background-color:#63C; } } div:hover{ -webkit-animation:mycolor 5s linear; } </style><body> <div>文字</div></body></html>