<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 150px;
height: 150px;
background: red;
/*过渡属性*/
/*transition: background 10s ease-in,width 10s ease-in;*/
transition: all 10s ease-in 3s;
}
#box:hover{
background: blue;
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id ="box"></div>
</body>
</html>CSS3过渡
transtion:property duration timing-function delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
#box{
width: 100%;
height: 300px;
background: skyblue;
position: relative;
}
.img1{
width: 50px;
height: 80px;
position: absolute;
left: 200px;
top:50px;
/*infinite播放无数次*/
animation: balloon 30s infinite alternate;
}
/*定义动画帧*/
@keyframes balloon{
0%{
left: 20%;
top: 10px
transform:rotate(-5deg);
}
55%{
left: 65%
top:100px;
transform: rotate(-25deg);
}
100%{
left:88%;
top: 20px;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div id="box">
<img class="img1" src="balloon.png" alt="">
</div>
</body>
</html>CSS3动画
@keyframes 创建动画
animationn:name duration timing-function delay inernation-count diretion
具体详见：http://www.runoob.com/cssref/css3-pr-animation.html