CSS3之动画(animation)和四个小案例

一、动画(animation)

1.动画概述

可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

2.语法

1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。

2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画

3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。

@keyframes 动画名称 {
	0%{
		初始状态属性
	}
	100%{
		结束状态属性
	}
}

div {
	
	animation-name:动画名称;
	
	animation-duration:time;
}

3.用法

        @keyframes move {

            /* 初始状态 */
            0% {
                transform: translate(0, 0);
            }

            /* 结束状态 */
            100% {
                transform: translate(1200px, 0);
            }
        }
        .box1 {
            background-color: #f34;
            /* 调用动画名称 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 3s;
        }

4.多个动画序列用法

        @keyframes move {

            /* 初始状态 */
            0% {
                transform: translate(0, 0);
            }

            /* 百分比是动画总时间的百分比：10s+25%=2.5s */
            /* 百分比要是整数 */
            25% {
                transform: translate(1200px, 0);
            }

            /* 移动的位置时相对于初始位置，不是相对于自身 */
            50% {
                transform: translate(1200px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #f34;
            animation-name: move;
            animation-duration: 10s;
        }

4.1总结

1.根据动画的时间，用百分比控制多个节点的动画状态。

2.节点的百分比必须是整数。

3.动画中的移动位置始终是相对于元素的初始位置。

5.动画属性

        div {
            width: 100px;
            height: 100px;
            background-color: #f34
            /* 动画名称(必写) */
            animation-name: move;
            /* 动画完成一个周期需要花费的时间(必写) */
            animation-duration: 3s;
        }
        
        .box2 {
            /* 动画的速度曲线，类似于过渡，默认是ease */
            animation-timing-function: ease;
            /* 动画何时开始，默认是0 */
            animation-delay: 2s;
        }

        .box3 {
            /* 动画播放的次数，默认是1，循环播放是infinite */
            animation-iteration-count: infinite;
        }

        .box4 {
            /* 要逆向播放必须要有循环播放 */
            animation-iteration-count: infinite;
            /* 动画下一周期是否逆向播放，默认是normal，逆向alternate */
            /* animation-direction: normal; */
            animation-direction: alternate;
        }

        .box5 {
            /* 动画结束后是否回到起始位置，默认是backwards，保持最终状态forwards */
            /* animation-fill-mode: backwards; */
            animation-fill-mode: forwards;
        }

        .box6:hover {
            /* 规定动画是否运行或者暂停，默认是running，暂停是paused */
            animation-play-state: paused;
        }

5.1动画属性简写

        .box1 {
            /* 书写顺序 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation:动画名称 动画一周期时间 运动曲线 何时开始 运动次数 是否反向 运动结束后是否保留最终状态 */
            animation: move 3s linear 1s infinite alternate backwards;
        }

        .box2 {
            /* 动画名称和运动时间必写，其余的省略就是默认值 */
            animation: move 3s forwards;
        }

        .box2:hover {
            /* 运动暂停不能简写，一般和hover搭配使用 */
            animation-play-state: paused;
        }

        .box3 {
            /* 动画简写没有顺序之分，如果写了两个时间，第一个时间必须是运动时间，第二个必须是何时开始 */
            animation: 3s 1s linear backwards infinite alternate move;
        }

5.2总结

1.动画属性name和duration必写，其余的不写就是默认值。

2.动画属性简写除了动画时间和何时开始以外没有顺序之分。只有一个时间时，就是运动时间，何时开始取默认值0；有两个时间时，第一个时间必是运动时间，第二个是何时开始。

3.运动是否暂停不包含在简写范围内，需要搭配:hover使用。

5.3动画运动曲线属性

       .box1 {
            /* 默认ease，低速开始，逐渐加快，结束前变慢 */
            animation: width 2s ease infinite;
        }

        .box2 {
            /* linear匀速 */
            animation: width 2s linear infinite;
        }

        .box3 {
            /* ease-in运动以低速开始 */
            animation: width 2s ease-in infinite;
        }

        .box4 {
            /* ease-out运动以低速结束 */
            animation: width 2s ease-out infinite;
        }

        .box5 {
            /* ease-in-out运动以低速开始并结束 */
            animation: width 2s ease-in-out infinite;
        }

        .box6 {
            /* steps运动分为几步来完成 */
            animation: width 2s steps(10) infinite;
        }

        .box7 {
            /* steps运动分为几步来完成 */
            animation: width 2s steps(30) infinite;
        }

6.案例

6.1 地图案例

6.2 打字机案例

    
    
    
    



    
一不小心就干掉了个大家伙

6.2 奔跑的小熊

图片

6.3 动画时钟

    
    
    
    



    

        

        

        

        

        

        

        
        

            

                
12
                
6
            
            

                
1
                
7
            
            

                
2
                
8
            
            

                
3
                
9
            
            

                
4
                
10
            
            

                
5
                
11
            

        
        

        

        

        


    

6.4 loading

    
    
    
    



    

        

        
 loading....