day8CSS3动画

一.CSS3 2D变形

1.tranlate

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。

matrix(a,b,c,d,e,f)定义了2D的变形，使用了6个值的矩阵。表示如下:

​ a c e

​ b d f

​ 0 0 1

matrix用一个三行三列的矩阵表示，a和b列表示x轴，c和d列表示y轴，e和f表示z轴

​ a和d表示缩放（如果没有缩放，值设为1）

​ b和c表示扭曲（如果没有扭曲，值为0）

​ e和f表示位移（如果，没有位移，值为0）

如果旋转角度为θ，他会影响到a,b,c,d的值：

​ a=cosθ

​ b=sinθ

​ c=-sinθ

​ d=cosθ

如果扭曲skew（θ1，θ2），会影响到b和c的值：

​ b=tanθ1

​ c=tanθ2

每次旋转和扭曲都会产生一个新的矩阵，最终形成的 多个矩阵相乘。

如果对一个元素同时由旋转，缩放，扭曲和位移，这时要用形成的多个矩阵相乘，优先考虑旋转和缩放！！！

案列分析：

需求：将div右移100px,下移200px，旋转30度，x轴缩放1.5倍，y轴缩放2倍

方法：
	1）缩放（1.5，2）填入矩阵,形成一个矩阵
		1.5	0 	0
		0	2	0
		0	0	1
	2）旋转30deg,
		a=cosθ=cos30=0.866

		b=sinθ=0.5

		c=-sinθ=-0.5

		d=cosθ=0.866
	形成一个矩阵:
		0.866 	-0.5	0
		0.5		0.866	0
		0		0		1
	
	3)上面两个矩阵相乘
	 	1.5	0 	0		0.866 	-0.5	0		1.299 	-1 		0
		0	2	0   X   0.5		0.866	0	=	0.75	1.732	0
		0	0	1		0		0		1		0		0		1
		则
		matrix(1.299, .75, -1, 1.732, 100, 200)

注意:matrix函数的位移不用带单位，默认px

2.transform-origin 属性—设置元素的基点

语法： transform-origin: x-axis y-axis z-axis;
​ 属性值：
​ x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。
​ y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。
​ z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

3.perspective属性—让子元素获得透视效果，加在父元素上

rspective:length|none

主流浏览器都不支持，谷歌要加-webkit,或者在长度后加单位

.father{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            padding: 10px;
            border: 1px solid #ff0;
            position: relative;
            /*-webkit-perspective: 150px;*/
            perspective: 100px;
        }
        .son{
            width: 100px;
            height: 50px;
            padding: 50px;
            background-color: #0ff;
            position: absolute;
            border: 1px solid #444444;
            -webkit-transform: rotateX(45deg);
            -moz-transform: rotateX(45deg);
            -ms-transform: rotateX(45deg);
            -o-transform: rotateX(45deg);
            transform: rotateX(45deg);
        }

4. trasform-style属性，加在父元素上

在 3D 空间中呈现被嵌套的元素.(该属性必须与 transform 属性一同使用)
​ 语法： transform-style: flat|preserve-3d;
​ 属性值：
​ flat ：子元素将不保留其 3D 位置,默认值。
​ preserve-3d ：子元素将保留其 3D 位置。

5.过渡动画-transition 属性

1）常规用法：

​ transition-property
​ transition-duration
​ transition-timing-function
​ transition-delay

2）简洁（复合）用法：

​ transition:property-name-list|all duration[这两项不可省略] timing-function delay;

​ a)可以使用的属性有：

​ I)颜色

​ color background-color border-color outline-color

​ II)位置

​ background-position left right top bottom

​ III)长度：

​ max-height min-height max-width min-width height width border-width margin padding outline-width outline-offset font-size line-height text-indent vertical-align border-spacing letter-spacing word-spacing

​ IV)数字：

​ opacity visibility z-index font-weight zoom

​ V)组合：

​ text-shadow transform box-shadow clip

​ VI)其他

​ gradient(线性和径向)

​ b)duration:动画持续时间，一般以秒(s)或毫秒（ms）为单位

​ c)timing-function:动画函数

​ 1）linaer:匀速

​ 2）ease:变速（先慢后快再慢）

​ 3）ease-in:变速：（由慢到快）

​ 4）ease-out:变速（由快到慢）

​ 5）ease-in-out:变速 （慢速开始，慢速结束）

​ 6）cubic-bezier(n,n,n,n)；自行设定变速，n的值在0——1之间。

​ d)动画延时时间，一般以秒(s)或毫秒（ms）为单位

6.关键帧动画

通过 @keyframes 规则，您能够创建动画。
​ 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
​ 在动画过程中，您能够多次改变这套 CSS 样式。
​ 以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
​ 0% 是动画的开始时间，100% 动画的结束时间。
​ 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
​ 注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

步骤：

​ 1）设置关键帧

​ a）如果只有两个关键帧

@keyframes 动画名 {
	0%：{样式表}
	100%：{样式表}
}
或者
@keyframes 动画名 {
	from：{样式表}
	to：{样式表}
}

​ b)如果是多个关键帧

@keyframes 动画名 {
	0%：{样式表}
	25%：{样式表}
	50%：{样式表}
	60%：{样式表}
	    ...
	100%：{样式表}
}

注意：这里的百分比一般是升序，可以是%0-100%之间的任意值，也可以是倒叙

​ b)实施动画

​ a)常规用法

​ **animation-name：**来自于@keyframes定义的动画名
​ **animation-duration：**动画持续时间，一般以秒(s)或毫秒（ms）为单位，（默认为0）
​ **animation-timing-function：**动画函数

​ 1）linaer:匀速（默认值）

​ 2）ease:变速（先慢后快再慢）

​ 3）ease-in:变速：（由慢到快）

​ 4）ease-out:变速（由快到慢）

​ 5）ease-in-out:变速 （慢速开始，慢速结束）

​ 6）cubic-bezier(n,n,n,n)；自行设定变速，n的值在0——1之间。

​ animation-delay：动画延时时间，一般以秒(s)或毫秒（ms）为单位
​ **animation-iteration-count：**动画循环播放的次数
​ 1）number:按设定的次数循环（默认次数1次）

​ 2）infinite:一直循环

​ **animation-direction：**动画播放完是否反向播放

​ 1）normal:不返向（默认值）

​ 2）alternate:反向

​ animation-play-state：动画播放或停止

​ 1）paused:停止播放

​ 2）running:播放（默认值）

​ 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

​ b）简介用法：

​ animation：name duration[必须加] timing-function delay iteration-count direction