CSS3转换、过渡、动画

transform 转换

• rotate(*deg)：旋转

顺时针旋转某deg度 ，负值逆时针

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

• translate(x,y)：xy移动

根据(X轴)和(Y轴)位置给定的参数，从当前元素位置移动。
细分：translateX(x）、ranslateY(y）

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}


#div2
{
	 -ms-transform:translate(10%,10%); /* IE 9 */
    -webkit-transform: translate(10%,10%); /* Safari */
    transform: translate(10%,10%); /* 标准语法 */
}

• scale(a,b)：宽高放大

元素宽度增加或减少a倍的大小，元素高度增加或减少b倍的大小
细分：scaleX(n)、scaleY(n)、

div{
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}

• skew(30deg,20deg)：xy轴倾斜

表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

细分：skewX(angle)、skewY(angle)

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

• matrix()方法和2D变换方法合并成一个，使用六个值的矩阵。

matrix(2,0,0,1.5,600,90)：
/*宽2倍，x轴旋转0，y轴旋转0，高1.5倍，x左移动600px,y下移90px*/

transition过渡

宽度属性的过渡效果，时长为 2 秒

div
{
	width:100px;
	height:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover
{
	width:300px;
}

.div2 {
    width: 100px;
    height: 100px;
    background: red;
     /* 多个样式的变换效果，添加的属性由逗号分隔*/
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

.div2:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

transition细化

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;/*过渡的 CSS 属性的名称v */
    -webkit-transition-duration:1s;/*过渡效果花费的时间。默认是 0。*/
    -webkit-transition-timing-function:linear;/*过渡效果的时间曲线。默认是 "ease" */
    -webkit-transition-delay:2s;/*规定过渡效果何时开始。默认是 0。 */
}

全部两秒

transition: all 2s;

animation动画

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

细分：

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	
	animation-duration:5s;
	/*规定动画的速度曲线。默认是 "ease"。 */
	animation-timing-function:linear;
	/*动画延迟。默认是 0。 */
	animation-delay:2s;
	/*规定动画被播放的次数。默认是 1。 */
	animation-iteration-count:infinite;
	/*规定动画是否在下一周期逆向地播放。默认是 "normal"。 */
	animation-direction:alternate;
	/*规定动画是否正在运行或暂停。默认是 "running"。 */
	animation-play-state:running;
	
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}