【前端特效篇】CSS3 过渡与动画

变形和动画都是前端开发过程中，用来提高用户体验的一种方式。增加一些动效，可以使页面看起来不那么枯燥无味。

HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目

一、变形 transform

transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

变形都是相对于自己本身原来的位置进行转换，原来的位置还占位，只是视觉上的变化。这点来看和相对定位有点类似。

1.1 2D 变形

2d中的坐标系：x 表示正方向向右 y表示正方向向下

• translate(x,y) 偏移，值函数，两个参数分别为 x 方向和 y 方向偏移；如果只有一个值，就是代表向 x偏移

  translateX (x) X 方向偏移
  translateY (y) Y 方向偏移

  /* 向下偏移100px */
  /* transform: translateY(100px); */
  /*  向右偏移200px*/
  /* transform: translateX(200px); */
  /* 同时设置向下偏移100px向右偏移200px */
  /* transform: translate(200px,100px) */
  
  transform: translate(100px);
  

• scale(x,y) 缩放，两个参数分别为x方向和y方向缩放值；如果只有一个值，代表元素两个方向的缩放值

  scaleX(x) X 方向缩放

  scaleY(y) Y 方向缩放

  /* x方向缩小一半 */
  /* transform: scaleX(0.5); */
  /* y方向变大一半 */
  /* transform: scaleY(2); */
  
  /* 设置x、y方向的缩放值 */
  /* transform: scale(0.9,0.5); */
  
  transform: scale(0.5);
  

• skew(x deg, y deg); 倾斜，定义沿着 X 和 Y 轴的 2D 倾斜转换

  skewX()

  skewY()

  /* x方向倾斜30deg */
  /* transform: skewX(30deg); */
  
  /* y方向倾斜30deg */
  /* transform: skewY(60deg); */
  
  transform: skewX(30deg);
  

• rotate(z deg) 旋转 定义 2D 旋转，在参数中规定角度

  rotateX() x轴旋转

  rotateY() y轴旋转

  rotateZ() z旋转，平面旋转

  /* x轴旋转30deg */
  /* transform: rotateX(30deg); */
  /* y轴旋转30deg */
  /* transform: rotateY(60deg); */
  
  transform: rotateZ(60deg)
  

1.2 改变变形中心点

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

transform-origin: x-axis y-axis z-axis;

• x-axis 定义视图被置于 X 轴的何处。可能的值：left center right 固定值 百分比
• y-axis 定义视图被置于 Y 轴的何处。可能的值：top center bottom 固定值 百分比
• z-axis 定义视图被置于 Z 轴的何处。可能的值：固定值

注：2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

1.3 改变变形类型

transform–style 属性指定嵌套元素是怎样在三维空间中呈现，2D 变形 和 3D 变形，属性值如下

• flat 表示所有子元素在2D平面呈现
• preserve-3d 表示所有子元素在3D空间中呈现

1.4 3D 变形相关属性和属性值

3d中的坐标系：x 表示正方向向右 y表示正方向向下 z表示垂直于屏幕

• perspective 景深，表示距离屏幕多少像素
• translate3d(x,y,z)
• translateZ(z) 属性表示元素沿着自身Z轴移动了多少像素
• scaleZ(z deg)

注意：3d 变形需要配合景深使用，给父元素添加 perspective 属性

父元素{
	prespective: 101px; // 表示父元素距离屏幕101px的距离，类似于看戏时确定舞台的距离
}
子元素{
	transform: translateZ(100px); // 表示子元素从距离屏幕101px的位置，移动到了距离屏幕1px的位置
}

1.5 背面不可见

backface-visibility : visible(默认，背面可见) | hidden(背面不可见);

二、过渡 transition

过渡是从一种效果到另外一种效果的演变，需要触发条件，如：鼠标滑过 获取焦点 点击事件等等

两个必要的条件：

​ 过渡属性 transition-property

​ 过渡的时间 transition-duration

除了以上两个属性：

​ 过渡的作用曲线 transition-timing-function

​ 过渡的延迟时间 transition-delay

三、动画 animation

动画也是从一种效果过渡到另外一种，这个不需要任何触发条件，自动播放；

两个必要条件：

​ animation-name 动画的名称

​ animation-duration 动画的过渡时间

其他属性：

animation-delay 动画延迟播放的时间

animation-timing-function 动画的播放速率，属性值同transition-timing-function

animation-iteration-count 设置动画的播放次数；可以给数字，如果设置为infinity 代表无限次播放

animation-direction 设置动画播放的方向，属性值如下：

​ normal 正向播放

​ reverse 反向播放

​ alternate 奇数次正向播放，偶数次反向播放

​ alternate-reverse 偶数次正向播放，奇数次反向播放

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 属性值 forwards 保留动画最后一帧效果

动画集规则：

@keyframes name{ 
	from{}  
	to{}
}

注意：由于form…to 过渡效果太少，一般我们会利用百分比 0% ， 10%，…,90%,100%呈现更加细腻的动画过程

@keyframes name{
    0%{}
    10%{}
    ...
    90%{}
    100%{}
}

动画简写属性

animation:name duration delay timing-function iteration-count direction;

控制动画的播放状态

animation-play-state: running (默认运动) | paused (停止) ; 

如：设置鼠标滑过容器停止动画的播放