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

过渡属性 ——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;}
            }