CSS3的chapter5

　　变形样式——transform：

• • translate()                              ——指定对象的2D translation（2d平移）
  • transform-origin                      ——指定元素的中心点，默认为元素x轴和y轴的50%处
  • translateX()                            ——指定对象X轴（水平方向）的平移
  • translateY()                            ——指定对象Y轴（垂直方向）的平移
  • rotate()                                  ——指定对象的2d rotation（2d旋转），需先有transform-origin 属性
  • scale()                                    ——指定对象的2d scale（2d缩放）
  • scaleX()                                  ——指定对象X轴（水平方向）的缩放
  • scaleY()                                  ——指定对象Y轴（垂直方向）的缩放
  • skew()                                    ——指定对象的skew transformation（斜切扭曲）
  • skewX()                                  ——指定对象X轴（水平方向）的扭曲
  • skewY()                                   ——指定对象Y轴（垂直方向）的扭曲
  • translate3d()　　                     指定对象的3d位移，参数不能省略

　　过渡动画——transition

1. • 过渡属性            ——transition-property
        用法：
     　　1.在默认样式中声明元素的初始样式
           2.声明过渡元素的最终样式
           3.在默认样式中添加过渡函数
     

     　　基本上可以把以上属性归纳为带有数值的
     属性，都支持过渡动画（其中visibility可以看成
     是0和1，它可以常常搭配opacity属性，来实现一
     个元素渐隐渐显并最终隐藏或显示）。最简单写法
     是直接用all代表所有属性

   • 过渡所需时间      ——transition-duration
           设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间
     
     
   • 过渡函数            ——transition-timing-function
     

     ease	默认值，逐渐变慢
     linear	匀速过渡
     ease-in	加速
     ease-out	减速
     ease-in-out	加速然后减速
     cubic-bezier	自定义
     等等

   • 过渡延迟时间      ——transition-delay
           指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行
     
     
   • 缩写　　　　

   • transition: all .5s ease-in .1s;

 

　　　自定义动画：

• • 动画名称——animation-name
  • 关键帧——@keyframes
    

    @keyframes fromTopToBottom{
                    from{height:25px;}
                    to{height:150px;}
                }

  • 动画时间——animation-duration

  • 动画的过渡函数——animation-timing-function
    

    ease	默认值，逐渐变慢
    linear	匀速过渡
    ease-in	加速
    ease-out	减速
    ease-in-out	加速然后减速
    cubic-bezier	自定义
    等等

  • 动画延迟时间——animation-delay
  • 动画执行次数——animation-itertion-count
  • 动画顺序——animation-direction
    • normal——正常方向
    • reverse——反方向
    • alternate——先正常再反方向，并交替运行
    • alternate-reverse——先反方向再正方向运行，并交替运行
  • 动画状态——animation-play-state
    

    div:hover{       
        animation-play-state:paused || running;
    }

  • 动画运行时间以外的状态——animation-fill-mode
    • none：默认值，不设置
    • forwards：动画结束的状态
    • backwards：动画开始的状态
    • both：结束或开始的状态
  • 缩写　　
    

    animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction

     

    代码：

    <style type="text/css">
                div{
                    font-size:100px;
                    color: white;
                    
                    width:0px;
                    height:100px;
                    background-color:red;
                    
                    -webkit-animation-name:div1;
                    
                    -webkit-animation-duration:5s;
                    
                    -webkit-animation-timing-function:ease-in-out;
                    
                    -webkit-animation-delay:.5s;
                    
                    -webkit-animation-iteration-count:1;
                    
                    -webkit-animation-direction:alternate;
                    
                    -webkit-animation-fill-mode:both;                
                }
                div:hover{
                    -webkit-animation-play-state:paused;
                }
                @-webkit-keyframes div1{
                    0%{width:0; background-color:red;}
                    25%{width:250px; background-color:black;}
                    50%{width:500px; background-color:gray;}
                    75%{width:750px; background-color:black;}
                    100%{width:1000px; background-color:red;}
                }