1.transition过渡动画

transition : 由一种状态到另外一种状态之间进行过渡的时候产生动画效果

/ 需要添加动画的属性 不需要双引号，如果有多个属性要进行动画，中间用逗号隔开;如果该属性不写，则默认给所有属性添加动画 / 

1
2
3
4
5
6
7
transition-property: width,height;
           /*动画的持续时间*/
           transition-duration: 3s;
           /*动画的运动方式*/
           transition-timing-function: ease;
           /*动画延迟时间*/
           transition-delay: 1s;

/复合属性/

1
transition: width 3s linear 0s,height 3s linear 1s;

2.animation动画

animation：关键帧动画，一种状态到另一种状态再到另一种状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box:hover{
           /*鼠标悬停的时候添加动画*/
           animation-name: anim;
           animation-duration: 4s;
           animation-delay: 1s;
           animation-timing-function: linear;
           /*动画播放完的状态:forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
           animation-fill-mode: forwards;
           /*动画播放的次数*/
           /* animation-iteration-count: 10; */
           /*动画交叉执行*/
           animation-direction:alternate ;
       }
        .box:active{
       /*控制动画是否暂停*/
       animation-play-state: running;
       animation-play-state: paused;
   }

/*声明一个关键帧动画 ：我们这边只有两帧
动画的名字就叫：anim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*/
     @keyframes anim {
         /* from{ 
             width: 100px;
         }  
         to{ 
             width: 300px;
         }   */
           0%{
         /*可以同时对多个属性添加动画效果*/
         transform: rotate(0deg) scale(1);
     }
     50%{
         transform: rotate(180deg) scale(2);
     }
     100%{
         transform: rotate(360deg) scale(1);
     }
 }

复合属性：

1
animation: name duration timing-function delay iteration-count direction fill-mode;