HTML动画效果

1、transform  改变 ，html中线性动画的数据。

    具体的值：
    （1）translate        转化变化，线性变化效果。

            例如:  同时设置x 轴，和y 轴的偏移效果
            
                transform: translate(10px,20px);

            分别设置，x轴和y轴的偏移效果。
            
                transform: translateX(4px);
                transform: translateY(20px);

    (2)    scale        比例变化，缩放效果
            scale 的值表示，相对原来大小倍数。
            
            例如：
                 transform: scale(1.5);
                 将原来的元素大小，设置为原来1.5倍

    * 注意：如果要设置多条动画效果，需要写在同一个 transform里面。
            例如：
                 transform: scale(1.1) translateX(30px); 
                 同时设置，缩放效果，和x轴平移效果。

    （3）skew    动画倾斜效果。
             例如：
                    transform:skew(30deg,30deg) ;
            解析：
                 向x轴偏移30度角，向y轴偏移30度角。

    （4） rotate  旋转动画效果。
            例如：
                transform: rotate(45deg);       
                /*顺时针方向，旋转45度*/

            如果给的旋转角度，是负值，就逆时针旋转。

2、transition    动画属性的设置。

    （1）设置什么样的动画效果，写动画效果的属性。
            可以具体设置一个属性，比如宽高，背景颜色，动画效果。
            也可以设置关键字： all  代表，
                触发动画之后，所有的属性，都可以变化。
    
    （2）设置过度需要的时间。动画执行过程需要几 秒 （以秒为单位）
    （3）设置动画的效果
                由快到慢：            ease 
                渐显渐隐 效果：        ease-in        渐显
                                    ease-out    渐隐
                                    ease-in-out
                匀速        linear
    （4）设置动画延迟时间，也就是几秒之后，才执行动画。
        
        
    例如：
         transition:all 2s ease-in-out 2s ;
        设置动画效果属性
            所有属性发生变化
            2s执行完
            渐显渐隐效果
            延迟2s后开始 执行 注意：transition  是动画属性的设置
            在动画的原始状态下，即标签常规状态下设置。
            而动画效果的触发，可以设置在特定情况下，比如鼠标悬停。
          

3、animation     关键帧动画效果        
    
        （1）动画的声明：
                @keyfrafme 动画名字{
                    开始状态设置
                    过度状态设置
                    结束状态设置
                }
                
                
            例如：
         /*创建动画关键帧*/
            @keyframes spread {
                0%{
                    width: 0;
                    transform: translate(100px,0);
                }
                25%{
                    width: 20px;
                    transform: translate(200px,0);
                }
                50%{
                    width: 50px;
                    transform:translate(300px,0);
                }
                75%{
                    width: 20px;
                    transform:translate(200px,0);
                }
                100%{
                    width: 0px;
                    transform:translate(100px,0);
                }
            }
                    
        
        
        （2）动画的使用：
                animation：    动画名字 
                
                            动画时间         以秒为单位设置具体的值
                            播放方式          
                            延迟时间         以秒为单位设置具体的值
                            动画播放次数    可以具体设置数字限定执行次数。
                                            也可以设置 infinite ，表示无限次！
                            
                            动画播放方向 
                            动画播放状态 
                            动画开始之前和结束之后的操作
                    
                例如：
                    /*调用动画*/
                    animation: spread 2s linear infinite;