css3--动画，过渡，转换

过渡：transition
动画:animation
transform 转换

过渡：transition

过渡:只要状态发生了改变,过渡是管去管回的
transition: 属性名 完成过渡的时间 过渡完成的快慢 多长时间后开始过渡;

值	属性
transition-property	设置过渡效果的 CSS 属性的名称。all为所有属性
transition-duration	完成过渡效果需要多少秒或毫秒。
transition-timing-function	速度效果的速度曲线。
transition-delay	过渡效果何时开始。

transition: property duration timing-function delay;
写法例子：

transition: all 5s cubic-bezier(0,0,1,1) 3s;
transition-property: all;
transition-duration: 3s;
transition-timing-function: cubic-bezier(0,0,1,1);
transition-delay: 3s;

实例：

<style>
		div{
		width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        background-color: #0000FF;
	   transition: width 2s, height 2s, background-color 2s, transform 2s;
		}
		div:hover{
		width: 200px;
         height: 200px;
         background-color: #ffcccc;
         transform: rotate(180deg);
		}

transition-timing-function 参数图例

<span id=index2

CSS3 动画属性（Animation）

@keyframes 规定动画。

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

@keyframes animationname {
 0-100%
from（与 0% 相同）{
  css-styles;
}
to（与 100% 相同）{
  css-styles;
}
     }

animation 所有动画属性的简写属性

1,animation-name:规定需要绑定到选择器的 keyfram 名称
2,animation-duration:规定完成动画所花费的时间,以秒或毫秒计,默认值0
3,animation-timing-funtion:速度变化曲线: 默认值ease
linear:匀速 ； ease-in:先慢变快 ； ease-out: 先快后慢 ；ease-in-out : 慢-快-慢
4,animation-delay:规定动画开始的延迟,默认值是0
5,animation-iteration-count:动画重复次数 infinite是正无穷
6,animation-direction: 设置动画方向: 默认值是 nomal
reverse:反方向 alternate:奇数次-正方向;偶数次-反方向 ； alternate-reverse:奇数次-反方向,偶数次-正方向
7,animation-fill-mode: backwards: 动画完成时,保持动画开始时的状态 ； forwards: 动画完成时,保持动画结束时的状态 ； both：设置这两个的效果，
8,animation-play-state:
running:默认值,执行动画
paused 让动画暂停

注意：
steps() 有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式，函数指定了一个阶跃函数

合并写法：0
animation：name 动画所花费的时间 规定动画的速度曲线 规定在动画开始之前的延迟 播放的次数 是否应该轮流反向播放 动画完成时状态；

例子：

<style>
		@keyframes change-color{
			0%{
				background-color: red;
			}
			25%{
				background-color: green;
			}
			50%{
				background-color: yellow;
			}
			75%{
				background-color: blue;
			}
			100%{
				background-color: #fff;
			}
		}
		div{
			width: 100px;
			height: 100px;
			background-color: #f0f;

			animation: change-color 4s steps(1,start);
			/*start   保留下一帧状态，知道动画结束 */
			/*end     保留当前帧状态，直到动画结束*/

		}
	</style>

CSS3 transform 转换

transform 应用于元素的2D或3D转换。实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。这个属性允许你将元素旋转，缩放，移动，倾斜等

transform-origin：定义的是旋转的基点 ,参数默认x，y，z的值： 50% 50% 0；
transform-origin并不是transform中的属性值，他具有自己的语法

transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。(可理解为将元素变为一个3D 的房间)

transform-style:flat | preserve-3d
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。

transform的属性值参数：rotate;translate;scale;skew;matrix; 分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

2D矢量

一、旋转rotate
transform:rotate()：
rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），**需先有transform-origin属性的定义。transform-origin定义的是旋转的基点 **，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg);

二、移动translate

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），基点在元素心点时，具体使用方法如下：
如transform:translate(100px,20px):

transform:translateX(100px)

transform:translateY(20px)

三、缩放scale

scale(X,Y)是用于对元素进行缩放，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
缩放仅仅只是将x轴和y轴进行比例放大，造成看上去放大，但元素的宽高值并未改变。

transform:scale(2,1.5)

四、扭曲skew

skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)

skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）
如：transform:skew(30deg,10deg):

transform 3D转换渲染

transform-style: preserve-3d 将元素设置为3D元素
perspective 属性定义 3D 元素距视图的距离，以像素计当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。使具有3D变换的元素产生透视效果（当值为0或负值时，无透视效果，变换元素表现为扁平化）。
注释：perspective 属性只影响 3D 转换元素。

perspective-origin属性
perspective-origin用于创建perspective属性的起始点。事实上，该属性设置了观看者的眼睛在舞台元素上的投影位置。
默认值为：50% 50%
第一个值表示与border box左边界的距离，第二个值表示与border box上边界的距离。当只指定一个值时，第二个值作为50%处理。

一、旋转rotate

transform:rotate3d(x, y, z, a)：
语法：rotate3d(x, y, z, a)
x 表示旋转轴在x轴上的坐标
y 表示旋转轴在y轴上的坐标
z 表示旋转轴在z轴上的坐标
a 是一个值，表示旋转的角度，正值表示顺时针旋转；负值表示逆时针旋转。

二、移动translate3d()
translate3d(x，y，z) 接受三个参数，三个参数组成一个三维向量，三个值分别表示这个向量在相应坐标轴上的坐标，变换元素根据这个向量进行平移。

三、缩放scale

该函数接受3个参数，分别代表变换元素在X轴，Y轴和Z轴上的缩放比例。如果对应某一坐标轴上的参数值在(-1,1)范围内，则元素在该坐标轴方向上缩小，超出上述范围，则元素在该坐标轴方向上放大。如果等于1或-1，元素在该坐标轴上的尺寸不变。另外，负号表示对称变换。

scaleZ()
该函数只接受一个参数，相当于scale3d(1,1,sz)。
注意：单独使用3D的缩放变换，除了能在X轴和Y轴上看到效果，Z轴上是看不到效果的

返回TOP