【CSS3】动画animation-关键帧keyframes

 <!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;
 }