animation效果
添加一个颜色灰渐变的动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
div.dd {
background: green;
width: 200px;
height: 200px;
-webkit-transition:background 1s ease-in, width 1s ease-in 1s;
}
@-webkit-keyframes mycolor {
0%{
background: red;
}
30% {
background: blue;
}
70%{
background: yellow;
}
100% {
background: white;
}
}
div.dd:hover {
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count:1;
}
</style>
</head>
<body>
<div class="dd"></div>
</body>
</html>
