CSS变形与动画（三）：animation帧动画详解（用法 + 四个例子）

animation 帧动画

定义好后作用于需要变化的标签上。

使用

animation-name 设置动画名称
animation-duration: 设置动画的持续时间
animation-timing-function 设置动画渐变速度
animation-delay 设置动画延迟时间
animation-iteration-count 设置动画执行次数 无穷次（infinite）
animation-direction 设置动画的方向 值有alternate（交替）
animation-play-state 设置动画播放的状态 值 paused（暂停）
也可以向 transiton 那样多种属性写在一起，如：

animation: dh 4s linear 0s infinite alternate;

定义

@keyframes 动画的名称{  
    百分数 | to | from {  
        .....  
    }  
} 

例子1 字母

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    


    
"mb">
        
"b">

        
    

例子2 水滴

水滴：除了不太像，还是挺像的。。。

    
    
    
    


    
"sd">

    

例子3 会动的边框

    
    
    
    


    
"box">
        
"txt">
            Hello
        
        
"xz">

        
    

例子4 旋转木马

可以自己往里面放点图片。

    
    
    
    


    
"box">
        
"item">
        
"item">
        
"item">
        
"item">
        
"item">
        
"item">