代码
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 动画</title>
<style>
.img {
width: 150px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
img:hover {
animation: rotate 0.5s linear infinite;
}
</style>
</head>
<body>
<img src="images/fengche.png" alt="">
</body>
</html>上述代码中：
第10行代码定义animation属性实现动画效果；
第10~17行代码定义rotate动画让图片从0%到100%顺时针旋转360度；
第18~20行代码通过animation动画实现当鼠标指针悬停在图片上时让图片不停的旋转。
运行效果
CSS3 动画
CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画化时长等行为。