轮播图、旋转立方体

一、过渡

transition（过渡）：

指定一个属性发生变化时的切换方式，创建一些好的效果。可以同时指定多个属性，两个时间，第一个是执行时间，第二个是延迟。

transition-property : 指定过渡的属性，多个属性用逗号隔开，所有属性用 all ，大部分属性都支持过渡效果，过渡时必须是从一个有效值向另一个有效值过渡（auto不行）

transition-duration：过渡效果持续时间，1s=1000ms

transition-timing-function：过渡的时序函数，过渡的执行方式。

        可选值：ease：默认，减加减； linear：匀速； ease-in：加速运动； ease-out：减速运动；ease-in-out：先加速后减速； cubic-bezier（）来指定时序函数； steps（）分步执行过渡效果，可以设置第二个值，end：在时间结束时执行过渡（默认）；start：在时间开始时过渡

transition-delay：过渡效果的延迟，等待一段时间后执行。

二、变形

transform：改变元素的形状或位置，变形不会改变页面的布局

平移：百分比相对于自身计算

        translateX() ：沿 x 轴平移， translateY() ：沿 y 轴平移， translateZ() ：沿 z 轴平移

旋转：

        rotateX()

backface-visibility：是否显示元素的背面。visible：可视；hidden：隐藏。

三、动画

使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多样式的任意多次数。

@keyframes（关键帧）

创建动画，将一套 CSS 样式逐渐变化为另一套样式，以百分比来规定改变的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。使用动画属性来控制动画的外观，同时将动画与选择器绑定。

animation

 1. animation-name                   规定需要绑定到选择器的 keyframe 名称
 2. animation-duration               规定完成动画所花费的时间，以秒或毫秒计
 3. animation-timing-function     规定动画的速度曲线，默认“ ease ”
 4. animation-delay                    规定在动画开始之前的延迟，动画应用在元素上到动画开始的这段时间的长度
 5. animation-iteration-count      规定动画应该播放的次数
 6. animation-direction               规定是否应该轮流反向播放动画

1.animation-delay

作用：
定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

默认值：
0s，代表动画在应用到元素上后立即开始执行

取值：
正负值皆可。定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

2. animation-timing-function：

linear            动画从头到尾的速度是相同的
ease             默认。动画以低速开始，然后加快，在结束前变慢
ease-in         动画以低速开始
ease-out       动画以低速结束
ease-in-out        动画以低速开始和结束
cubic-bezier(n,n,n,n)             在 cubic-bezier 函数中自己的值

3. animation-iteration-count： 

默认一次，可以填数字，小数（播放动画周期的一部分），infinite 规定动画应该无限次播放

4. animation-direction：

是否应该轮流反向播放动画，默认值 normal，每个循环结束，动画从起点重新开始。

alternate，动画交替反向运动（小球循环常用），动画会在奇数次数正常播放，而在偶数次数时向后播放，如果把动画设置为只播放一次，则该属性没有效果。

reverse：反向运行，从动画结束的尾部到头部反向运行

alternate-reverse：反向交替运行，一次正一次反

5.  animation-play-state：

规定动画正在运行（running）还是暂停（paused）

6. animation-fill-mode：

规定动画在播放之前或之后，其动画效果是否可见。其属性值是由逗号分隔的一个或多个填充模式关键词。

none：不改变默认行为

fowards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards：在animation-delay 所指定的一段时间内，在动画显示之前，应用最开始属性值（在第一个关键帧中定义）

both：向前 向后填充模式都被应用

7. animation-timing-function：

每一动画周期执行的节奏，默认 ease，可能值为一或多个 timing-function， 

动画分为四个阶段：

初始状态，就是没有触发动画效果时，你元素原本应该有的状态
等待期，就是 animation-delay 设置的延迟期间
动画执行期，指的是 delay 结束瞬间开始执行动画，一直持续到最后一帧
完成状态，执行完最后一帧时，元素处于的状态

none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样。
forwards 表示将动画元素设置为整个动画结束时的状态。
backwards 明确设置动画结束之后回到初始状态。
both 表示设置为结束或者开始时候的状态。一般都是回到默认状态。