这段时间集中页面样式优化，发现css 动画越来越强大，集中恶补一下基础

内容提要

• transition
• transform
• animation

一、transition (过渡)

说明：deg度数，一个圆共360度

1、定义

transition 在一段时间内，一组css属性变换到另外一组属性的动画展示过程，需要有触发事件，例如：:hoever、:focus、:checked等

2、属性

属性	描述
transition-propety	需要变换的属性,取值有none、all和指定进行过渡的css属性
transition-duration	过渡动画持续的时间
transition-timing-function	规定的速度效果速度曲线
transition-delay	延期多少时间后开始执行

详解

• transition-timing-function

  属性	描述
  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 之间的数值。

3、用法

语法：transition: property duration timing-function delay;

#box {
  height: 50px;
  width: 50px;
  color: red;
  transition: transform 1s ease-in 1s;
}
#box:hover {
    transform: rotate(180deg) scale(.5, .5);
}

4、注意点

• 需要事件触发，所以没法在网页加载时自动发生
• 是一次性的，不能重复发生，除非一再触发
• 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态

二、 transform (变换，变形)

1、定义

Transform的中文翻译是变换、变形。是css3的一个属性，就如同width,height。

2、属性

属性	描述
translate	平移，translate(20px,100px)水平，垂直方向同时移动
rotate	旋转，结合transform-origin定义基点，进行旋转rotate(30deg)
scale	缩放，scale(0.1,2)水平，垂直方向，大于1为方法，小于1位缩小
skew	扭曲，skew(30deg,10deg)水平，垂直扭曲
matrix	矩阵

详解

• transform-origin(x,y) 设置变换的原点，通常和rotate旋转、scale缩放、skew斜切等一起使用；默认点是元素的中心点(50%,50%)，可以为 百分值，em，px；用法：transform-origin:(top,left) transform-origin:(left top) transform-origin:(0,0) transform-origin:(0%,0%)
• translate(x,y) translateX(x)仅水平方向移动（X轴移动），translateY(Y)仅垂直方向移动（Y轴移动），用法：transform:translate(100px,20px)
• scale(x,y) scaleX(x)元素仅水平方向缩放（X轴缩放），scaleY(Y)元素仅垂直方向缩放（Y轴缩放），默认值是(1,1)，用法：transform:scale(0.2,2)
• skew(x,y) skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形），；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），默认值是(1,1)，用法：transform:skew(30deg,10deg)

3、用法

语法：transform: translate | rotate | scale | skew | matrix;

#box {
  height: 50px;
  width: 50px;
  color: red;
  transition: transform 1s ease-in 1s;
}
#box:hover {
    transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
}

4、注意点和 transition 一样

三、animation (动画)

1、定义

transition属性的扩展

2、属性

属性	描述
animation-name	调用@keyframes定义好的动画，名称需一致
animation-duration	播放动画所持续的时间
animation-timing-function	动画的速度曲线，默认是'ease'
animation-delay	动画开始之前的延迟,默认0
animation-iteration-count	动画应该播放的次数，默认1，infinite无限次播放
animation-direction	是否应该轮流反向播放动画，默认'normal'正常播放，alternate轮流反向播放
animation-play-state	控制元素动画的播放状态，running(继续)，paused(暂停)
animation-fill-mode	动画结束后，元素的样式，none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)

3、用法

语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;

.box {
  height: 50px;
  width: 50px;
  color: red;
  animation: changebox 1s ease-in-out 1s infinite alternate running forwards;

}
.box:hover {
    animation-play-state: paused;
}

@keyframes changebox {
  10% {
      background: green;
  }
  50% {
      width: 80px;
  }
  70% {
      border: 15px solid yellow;
  }
  100% {
    width: 90px;
    height: 90px;
  }
}