这个图片是动态的，可以把代码复制下来看效果：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>动画</title>
<style type="text/css">
/* 上面的旋转动画代码 */
/* 定义动画，动画名：animat_rotate，可以取任意名字 */
/* 使用方式：animation: run 6s linear; */
@keyframes animat_rotate {
from {
/* 动画刚开始，角度 */
transform: rotate(0deg);
}
to {
/* 动画结束时，角度 */
transform: rotate(360deg);
}
}
/* ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== */
/* 下面的宽高变化动画代码 */
/* 定义动画，动画名：animat_changeWH，可以取任意名字 */
/* 使用方式：animation: animat_changeWH 6s linear; */
@keyframes animat_changeWH {
0% {
/* 动画刚开始，div的宽高 */
width: 200px;
height: 200px;
}
50% {
/* 动画执行一半时，div的宽高 */
width: 100px;
height: 400px;
}
100% {
/* 动画执行完毕时，div的宽高 */
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>
<!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: animat_rotate 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>
<!-- animat_changeWH：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: animat_changeWH 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background-color: green;"></div>
</body>
</html>