应用css3中的transition（过渡动画）、@keyframes（关键帧动画）、transform（2D、3D转换）可以实现一些小的动画效果。
一、transition—过渡动画
<!DOCTYPE html>
<html>
<head>
<title>基本图像的放大缩小</title>
<meta charset="utf-8">
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
transition: 1s ease 0.5s;
margin: 50px auto 0;
}
#div1:hover{
width: 400px;
height: 400px;
background: blue;
border-radius: 5%;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这是一个基本的红色方块与蓝色方块的转换效果，transition属性实现了这两者之间的过渡。
五个属性
1、transition-property css样式的属性名称；
2、transition-duration 动画的持续时间，单位为s；
3、transition-timing-function 动画效果的函数名称，后接linear（线性变化）、ease（逐渐慢下来）、ease-in（加速）、ease-out（减速）等；
4、transition-delay 动画延迟执行的时间，单位也是s。
5、animation-play-state:paused; 暂停动画执行。
五个属性可以简写为 transition：样式 持续时间 动画效果 延迟时间；（效果没有可以不写）