过渡动画
transition 属性 可以在属性之间参数多个帧数进行显示,这样就会看起来和动画效果一样的;
可以实现类似小米官网上的鼠标移动上去产生阴影效果,动态的添加阴影,盒子的位置;
过渡动画是css3出现的新特性;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height:100px;
background-color: yellow;
transition: all; /*属性width height background-color 三个属性变化*/
transition-duration: 500ms;
transition-delay: 1000ms; /*延迟1000ms执行动画*/
}
div:hover{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>