<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
div{
width: 300px;
height: 200px;
background-color: red;
animation-name: myanimation;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count:/*infinite*/;/*infinite一直播放*/
animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/
animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/
animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/
}
@keyframes myanimation{
/* from{
width: 150px;
height: 100px;
background-color: blue;
}
to{
width: 200px;
height: 150px;
background-color: green;
}*/
0%{
margin-left: 20px;
background-color: pink;
}
20%{
margin-left: 100px;
background-color: orange;
}
40%{
margin-top: 100px;
background-color: yellow;
}
60%{
margin-top: 200px;
background-image: grey;
}
100%{
margin-right: 300px;
margin-top: 150px;
background:green;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div><img src="img/鸟1.jpg"></div>
</body>
</html>
*{
margin:;
padding:;
}
img{
width: 200px;
height: 180px;
border:3px groove pink;
animation-name: myanimation;
animation-duration: 3s;
animation-delay: 1s;
animation-iteration-count:;
animation-fill-mode: both;
}
div{
/*background-color: red;*/
width: 200px;/*若无此句默认会左右充满屏幕，可以通过添加背景色观察到。*/
margin-left: auto;
margin-right: auto;/*此3句的作用是使div左右剧中*/
margin-top: 100px;
perspective: 600px;/*使子元素的动画效果具有立体感*/
}
@keyframes myanimation{
0%{
transform: rotateY(45deg);
}
50%{
transform: rotateX(180deg);
}
100%{
transform: rotateX(180deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div2">
<h3><a href="">花</a></h3>
<div><img src="img/花1.jpg"></div>
</div>
<div class="div2">
<h3><a href="">草</a></h3>
<div><img src="img/草1.jpg"></div>
</div>
<div class="div2">
<h3><a href="">树</a></h3>
<div><img src="img/树1.jpg"></div>
</div>
</body>
</html>
*{
margin:;
padding:;
}
h3+div{/*兄弟选择器*/
height:;
overflow: hidden;/*隐藏div*/
transition: all 1s ease;
}
a{
text-decoration: none;/*去掉链接的下划线*/
}
.div2{
width: 600px;
background: rgba(90,60,30,0.1);
margin-left: 15px;
margin-top: 4px;
}
h3{
background:rgba(180,70,40,0.5);
border-radius: 1em;
}
.div2:hover h3+div{
height: 400px;
overflow: auto;
}