响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画

代码

<!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声明，包括指定具体动画以及动画化时长等行为。