CSS3 动画

CSS3 动画

目录

1.1 动画的基本使用

1.2 动画序列

1.3 CSS3动画常见属性

1.4 CSS3动画简写

1.5 大数据热点图案例

1.6 速度曲线细节

---

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，自动连续播放等效果。

1.1 动画的基本使用

制作动画分为两步：先定义动画，在使用调用动画

1.用keyframes定义动画（类似定义类选择器）

 @keyframes  动画名称 {

        0%{

                  width:100px;

              }

         100%{

                  width:200px;

                   }

    }

动画序列：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列在 @keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%

2.调用动画

animation-name：动画名称；

animation-duration：持续时间；

    
        
        
        @keyframes move {

            
            0% {
                transform: translateX(0px);
            }

            
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            
            
            animation-name:move;
             
             animation-duration: 2s;
        }
    

1.2 动画序列

案例：

  
        
        
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

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

            100% {
                transform: translate(0, 0);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    



    

1.3 CSS3动画常见属性

倒数第二个属性：

1.4 CSS3动画简写

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态；

name，duration必须要写

animation: myfirst 5s linear(匀速) 2s infinite(无限循环) alternate; 

1.5 大数据热点图案例

图片要放在本地才能使用

    
    
    
    
    
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
      
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            
            
            
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                
                width: 40px;
                height: 40px;
              
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    



    
        
            
            
            
            
        
        
            
            
            
            
        
    

1.6 速度曲线细节

 steps分步长来走的，实现打字机效果： div里面写十个字就行(设置的每个字20px，一共200px）