CSS3动画（transition，transform）和元素的隐藏显示display

    工作中经常会写一些简单的显示隐藏功能，可以适当加个动画

transition（过度动画，从某某某属性到某某某属性）

语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transform （转化动画）

   旋转：rotate()

   缩放：scale()

   翻转：skew()

 

transition和transform 动画会占文档流

display：none   不占文档流    block 占文档流

 

动画

    
    

    




    测试
    

        contentcontentcontentcontentcontentcontent
    

 

• ps：如果使用transform和transition写动画可能会出现文档流的一系列问题，
•         可以使用脱离文档流的定位（absolute，fixed）来解决这个问题