CSS3动画

一：过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

补间动画是各个状态的连接（关键帧）

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

二：变形 transform

2D 转换：平移translate、旋转rotate、缩放scale、倾斜skew【skju】

2D 转换方法：

• translate()

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

rotate()

可以对元素进行旋转，正值为顺时针，负值为逆时针；

1. 当元素旋转以后，坐标轴也跟着发生的转变

2. 调整顺序可以解决，把旋转放到最后

3. 注意单位是 deg 度数

4. 默认的旋转中心在中心点

   变形中心点默认都是中心 切换变形参考点 transform-origin:center center

   方向值 / px transform-origin:top left / right bottom/ left bottom / right top 20px 30px

scale()

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

  scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
  scaleX(x)元素仅水平方向缩放（X轴缩放）
  scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

• skew()

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

5.transform-origin可以调整元素转换的原点

div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */    

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

三：3D变形

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

rotateX()

就是沿着 x 立体旋转.

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateY(180deg);
}

rotateZ()

沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

1. 作为一个属性，设置给父元素，作用于所有3D转换的子元素
2. 作为transform属性的一个值，做用于元素自身

理解透视距离原理：

3D呈现（transform-style）

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换元素。

flat：所有子元素在 2D 平面呈现

preserve-3d：保留3D空间

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

?旋转立方体盒子

动画(CSS3)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;
animation-iteraction-count: n 5/infinite  无限次执行
animation-direction:normal 奇数偶数次动画 不区分  最初状态---》最终
                    alternate 奇数次的时候  最初状态---》最终
                              偶数次的时候  最终 ---》 最初

animation-play-state: paused/running;