CSS3 新特性

transition - 过渡

通过过渡transition，可以实现简单的动画交互效果。

//  语法
transition: property duration timing-function delay;

属性值和描述

实例-过渡

从初始状态过渡到终止状态时速度由快到慢，运动时间2s，1s后开始执行。

 div
{
	width:80px;
	height:80px;
	background:rgb(18, 185, 121);
	transition:width 2s ease 1s;
	-webkit-transition:width 2s ease 1s; 
}

div:hover
{
	width:200px;
}

实例-hover效果

button{
	width:100px;
	height:70px;
	border-radius: 10%;
	color: forestgreen;
}
.one{
	transition: all 3s;
}
button:hover
{
	background:rgb(218, 118, 4);
}

// html 
<div>
	<button class="one">Monday</button>
	<button class="two">Tuesday</button>
</div>

实例-过渡旋转

.box {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(rgb(105, 103, 204),rgb(226, 40, 26),rgb(106, 177, 85));
	  transition: all 3s;
}
.box:hover {
    transform: rotate(180deg) scale(.5, .5);
		background: -webkit-radial-gradient(rgb(218, 44, 116),rgb(45, 47, 207),rgb(201, 128, 19));
}


// html 

<div class="box"></div>

animation - 动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

shadow - 阴影

transform - 转换

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

translate:

translate(x,y) 沿着x轴正方向移动x距离 y轴正方向移动y距离
translateX(n) 沿着x轴正方向移动n距离
translateY(n) 沿着y轴正方向移动n距离

scale:

scale(x,y) 更改元素的宽度和高度，将元素的宽度变为原来的x倍，将高度变为原来的y倍
scaleX(n) 更改元素的宽度
scaleY(n) 更改元素的高度

rotate:

rotate(x) 围绕z轴旋转，只接受一个参数，并且这个是2d方面的旋转，但是和后面的3d旋转中的围绕z轴旋转有着本质区别
rotateX(n)  围绕x轴旋转
rotateY(n) 围绕y轴旋转

skew:

skew(x-angle,y-angle) 定义2d倾斜旋转 沿着x轴和y轴
skewX(angle) 如果angle是正值，则沿着x轴正方向偏移斜切，负值则相反
skewY(angle) 如果angle是正值，则沿着y轴正方向偏移斜切，负值则相反