CSS3中的动画

CSS3中的动画中使用的属性在各个浏览器中的支持是不一定兼容的，我们在属性钱添加前缀来实现各个浏览器的兼容

-ms-兼容IE9
-webkit-兼容Safari和Chrome
-o-兼容Opera
-moz-兼容Firefox

为了节省篇幅，下面仅出现一次兼容性的语句，之后都不做兼容，在实际使用中自行添加兼容性语句。

一、2D转换，通过transform属性实现

transform-origin: x y; //设置转换时的相对中心，默认为元素的中心
    transform-origin: bottom left;

1、translate()方法位移

div {
transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

translateX(n)和translateY(n)表示单独设置X轴和Y轴的位移
    表示将元素从左向右移动50像素，从上向下移动100像素。
    如果使用百分数字，那么表示相对于元素自身的宽度或高度，由于行级盒子宽高属性不生效，所以该属性值为百分数的时候不生效

2、rotate()方法旋转

div {transform: rotate(30deg);} 
deg表示度，一个圆是360度
表示元素顺时针旋转30度。允许负值，元素将逆时针旋转

3、scale()方法缩放

div {transform: scale(2,4);}
表示宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍
scaleX(n)和scaleY(n)表示单独设置宽度和高度的倍数

4、skew()方法翻转

div {transform: skew(30deg,20deg);}
围绕X轴把元素翻转30度，围绕 Y 轴翻转20度
skewX(angle)和skewY(angle)表示单独围绕X轴和Y轴翻转的度数

5、matrix()方法把所有2D转换方法组合在一起

二、3D转换，也是通过transform属性实现，只不过比2D转换多了一个Z轴

1、translate3d(x,y,z)定义X、Y、Z轴的位移

translateX(x)、translateY(y)、translateZ(z)

2、rotate3d(x,y,z,angle)定义3D旋转。

rotateX(angle)、rotateY(angle)、rotateZ(angle)

3、scale3d(x,y,z)定义3D缩放

scaleX(x)、scaleY(y)、scaleZ(z)

3D转换的一些属性设置：

transform-style: flat|preserve-3d

规定被嵌套的元素在3D中如何呈现
flat表示子元素不保留其3D位置
preserve-3d表示子元素保留其3D位置

backface-visibility:visible|hidden

规定3D元素的背面是否可见

三、过渡效果，使用transition属性实现过渡效果

过渡是元素从一种样式逐渐改变为另一种的效果。要实现过渡必须规定希望把效果添加到哪个CSS属性上和效果的时长(单位可以是s或者ms)两项内容

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

div {transition: width 2s, height 2s, transform 2s;}

transition属性为一个简写属性,可以有4个参数值

后两个参数可以省略。这4个参数分别对应下面4个属性：

第一个transition-property为必须参数：规定应用过渡的css属性名称

第二个transition-duration不指定则没有实际意义：定义过渡效果花费的时间。默认是 0

第三个transition-timing-function可省略：规定过渡效果的时间曲线。默认是 "ease"

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

第四个transition-delay可省略：规定过渡效果何时开始，及设置过渡多长时间之后开始。默认是 0

四、css3中的动画，要在CSS3中创建动画，需要@keyframes规则。

@keyframes 规则用于创建动画

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

然后使用animation属性绑定该动画规则实现元素的动画效果

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

div{animation: myfirst 5s;}

1、@keyframes规则中用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器

2、绑定并设定动画：

animation 所有动画属性的简写属性，除了animation-play-state属性

animation-play-state 规定动画运行状态。默认"running"。设为paused暂停动画

属性从左至右依次为：

animation-name 指定@keyframes动画的名称
animation-duration 动画完成一个周期所花费的时间，单位s或者ms。默认0
animation-timing-function 规定动画的速度曲线
    linear  动画从头到尾的速度是相同的
    ease    默认值。动画以低速开始，然后加快，在结束前变慢
    ease-in 动画以低速开始
    ease-out    动画以低速结束
    ease-in-out 动画以低速开始和结束
    steps(int,start|end)
        第一个参数int表示要将整个动画的时间分割为多少步，每次动画前进一个分割间隔
            如设时间为1s，设置steps(60)则表示将1s分割为60等份，每次动画不再是平滑变化，而是下一帧是在1/60秒时的画面
        第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。可选值：
        start：表示直接开始。
        end：默认值，表示戛然而止
    cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定动画开始前等待的时间。默认0
animation-iteration-count 规定动画播放的次数。默认是1。设为infinite表示无限循环
animation-direction 规定动画是否循环交替反向播放动画
    normal：默认值，表示正常播放
    reverse：轮流反向播放
    alternate：在奇数次正向播放、偶数次反向播放
    alternate-reverse：在奇数次反向播放、偶数次正向播放
animation-fill-mode 规定当动画不播放（动画完成或动画有一个延迟未开始播放时），要应用到元素的样式
    none 默认值，在播放完成后画面回归到没有执行动画之前的画面
    forwards 当动画完成后，保持最后一个属性值，即播放完成后画面维持在最后一帧
    backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值，画面维持在即将播放的第一帧画面
    both 同时应用forwards和backwards属性

五、CSS的scroll-behavior属性

默认情况下，通过单击锚链接定位页面中的元素，浏览器将直接跳转到目标位置没有任何过渡

在不使用任何JavaScript的情况下，我们可以使用简单的scroll-behavior属性平滑地滚动到给定的元素

scroll-behavior属性接受两个值，将切换打开和关闭的平滑滚动功能

auto（默认）：该值允许滚动框中的元素之间突然跳转。
smooth：顾名思义，该值是滚动框内元素之间的平滑的过渡动画。

html {
    scroll-behavior: auto | smooth;
}