css3学习笔记（四）---变形与动画

变形

1，旋转--rotate()：以中心为原点旋转，正值顺时针，负值逆时针

#test {  transform:rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); }

2，扭曲--skew()：不会旋转，只改变形状，如长方形变成平行四边形

#test {  -webkit-transform: skew(45deg);  -moz-transform: skew(45deg);  transform:skew(45deg);}

3，缩放--scale()：scale(x,y)，水平与垂直方向，只有一个参数则倍数相同

#test:hover {  opacity: .5;  -webkit-transform: scale(0.8);  -moz-transform: scale(0.8);  transform: scale(0.8);}

4，位移--translate()：translate(x,y)，水平与垂直方向方向

#test {  -webkit-transform:translate(-50%,-50%);  -moz-transform:translate(-50%,-50%);  transform:translate(-50%,-50%);}/*水平垂直方向居中*/

5，矩阵--matrix(a,b,c,d,e,f)：含6个值的变换矩阵，用来指定一个2D变换，属性值涉及到数学中的矩阵知识

#test {  -webkit-transform: matrix(1,0,0,1,100,100);  transform: matrix(1,0,0,1,100,100);}/*相当于translate(100px,100px);*/

6，原点--transform-orgin：设置元素中心点，取值（top,bottom,left,right,top left,top right,bottom right,bottom left），默认情况下旋转、扭曲等变形都是基于元素自己中心位置变形的，这个属性可以改变元素中心点

#test {  -webkit-transform: skew(15deg);  -moz-transform: skew(15deg);  transform: skew(15deg);  -webkit-transform-origin: top right;  -moz-transform-origin: top right;  transform-origin: top right;}/*基于右上角扭曲15度*/

动画

1，过度属性--transtion(property指定过度css属性，duration指定过度完成时间，timing-function指定过度函数，delay指定开始过度的延迟时间)：

div {  width: 200px;  height: 200px;  background: green;  margin: 20px auto;  -webkit-transition-property: width;  transition-property: width;  -webkit-transition-duration:.5s;  transition-duration:.5s;  -webkit-transition-timing-function: ease-in;  transition-timing-function: ease-in;  -webkit-transition-delay: .18s;  transition-delay:.18s;}/*等价于transtion(width,.5s,ease-in,.18s)*/div:hover {  width: 400px;}/*宽度由200变为400*/

多个属性需要过渡时，用逗号隔开如下：

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

timing-function(过度函数)：ease,linear,ease-in,ease-out,ease-in-out,具体如下图

2，关键帧--keyframes：后紧跟动画名加一对花括号{}，0%->100%可以用from->to表示

@keyframes changecolor{  0%{    background: red;  }  40%{    background:orange;  }  80%{    background:green;  }  100%{    background: red;  }}div {  width: 300px;  height: 200px;  background: red;  color:#fff;  margin: 20px auto;}div:hover {  animation: changecolor 5s ease-out .2s;}

3,调用动画--animation：分别有如下几个属性，其中timing-function与过渡中的timing-function有一样的方法，

animation-name:around;/*动画名*/animation-duration: 10s;/*动画在这个时间段内完成*/animation-timing-function: ease;/*动画播放方式*/animation-delay: 1s;/*动画延迟，在这个时间段后开始*/animation-iteration-count:infinite;/*动画播放次数，通常为整数，此处意思是无限播放*/animation-direction:alternate;/*normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；此处是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。*/animation-play-state:running;/*这个属性应该设在hover下，元素本身的属性设置为paused；意思是让停止的动画在hover的时候播放，不是hover状态停止*/animation-fill-mode:none;/*设置动画时间外属性，详情如下表*/

animation-fill-mode属性值           效果                                                                                                                                      none默认值，表示动画将按预期进行和结束，在动画完成最后一帧时，动画会反转到初始帧处forwards表示动画在结束后继续应用最后的关键帧的位置backwards会在向元素应用动画样式时迅速应用动画的初始帧both元素动画同时具有forwards和backwards效果