CSS动画

1、CSS动画实现的不同方式及对应描述：

方式	描述
CSS3 transition	基于CSS3的过渡效果，可以控制属性变化的速度、时间、函数类型等
CSS3 transform	基于CSS3的变换效果，可以对元素的位置、大小、旋转、倾斜等进行操作
CSS3 animation	基于CSS3的动画效果，可以实现复杂的帧动画、逐帧动画、缓动动画等
SVG动画	使用SVG实现动画效果，可以实现矢量图形的动态变化和交互效果
JavaScript控制CSS	使用JavaScript控制CSS实现动画效果，可以实现更加复杂的动画效果，如点击交互、响应式布局等

CSS3 transition、CSS3 transform、CSS3 animation是常用的CSS动画实现方式，keyframes可以进一步定制动画效果，JavaScript控制CSS可以实现更加复杂的动画效果，SVG动画则适用于矢量图形的动态变化和交互效果。

2、示例

    
        
        
        
        
        
        
        
    
    
        

            1、transition: 鼠标移入，宽度从100px到200px
            

        


        

            2、transition+transform: 鼠标移入，旋转飞出（水平向右，向下分别移动100px，过程旋转180度，且放大2倍）

            另外，transform的变换是不会影响其他布局的，所以她比transition要流畅(即性能影响相对较小)
            

        


        

            3、animation+keyframes: 左右来回移动
            

        


        

            4、SVG动画：
        
            
        

        

            5、通过js和transition结合，交互式动画：
            

            Move Right