css3 动画

css3中的动画主要包含变形、过渡、动画三个，而变形厘米包含旋转、扭曲、缩放、移动以及矩阵变形等。通过这些css属性，我们可以不通过js来仅凭css3来实现动画特效。

变形，transform

css的变形主要包括旋转（rotate）、扭曲（skew）、缩放（scale）和移动（translate）以及矩阵变形（matrix）。
注意：多个属性叠加起来的时候是空格隔开

旋转，rotate

通过指定的角度参数对元素指定一个2D旋转，可以定义旋转的基点：

.fade-in:hover{
  transform-origin: 50% 50%;
  transform: rotate(45deg);
}

移动，translate

移动分为三种情况，translate(x, y)水平方向和垂直方向同时移动；translateX(x)仅水平方向移动x轴；translateY(y)仅垂直方向移动y轴，也可以使用transform-origin来设定基点

1
2
3

.fade-in:hover{
  transform: translate(100px, 100px);
}

缩放，scale

缩放也分为三种情况，scale(x, y)使元素水平方向和垂直方向同时缩放，scaleX(x)元素仅水平方向缩放，scaleY(y)元素仅垂直方向缩放，缩放基数为1，如果值大于1就放大，如果值小于1就缩小。

1
2
3

.fade-in:hover{
  transform: scale(0.3, 2);
}

扭曲，skew

扭曲也分为三种情况，skew(x, y)使元素水平方向和垂直方向同时扭曲，skewX(x)元素仅水平方向扭曲，skewY(y)元素仅垂直方向扭曲。扭曲就是斜切变换，参数为度数（deg）

1
2
3

.fade-in img:hover{
  transform: skew(30deg, 30deg);
}

矩阵，matrix

以一个含六值(a, b, c, d, e, f)变换矩阵的形式指定一个2D变换。这六个值对应的矩阵为3X3的矩阵：

item	name	fdsf
a	c	e
b	d	f
0	0	1
matrix(a, b, c, d, e, f)的值及其说明：
a：水平方向上的尺寸缩放
b：垂直方向上的倾斜率
c：水平方向上的倾斜率
d：垂直方向上的尺寸缩放
e：水平方向上的移动距离
f：垂直方向上的移动距离
基准数值为：(1, 0, 0, 1, 0, 0)

.fade-in img:hover{
  transform: matrix(1, 0, 0, 1, 300, 0);
  // 相当于
  transform: translateX(300px);
}

过渡，transition

transition允许属性值在一定时间内平滑的过渡。这种效果可以在鼠标点击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。
transition主要包含了四个属性值：

执行变换的属性，transition-property
变换延续的时间，transition-duration
变换的速率变化，transition-timming-function
变换延迟时间，transition-delay

transition-property

指定元素中一个属性改变时执行transition效果。主要有：none（没有属性改变）、all（所有属性改变）、indent（属性名称）

transition-duration

指定元素转换过程的持续时间，默认为0，变换是及时的。单位可以是s（秒）或者ms（毫秒）

transition-timing-function

根据时间的推进改变属性值的速率变化，有六个值：

ease 逐渐变慢，等于贝赛尔曲线（0.25, 0,1, 0.25, 0.1）
linear 匀速，等于贝赛尔曲线（0, 0, 1, 1）
ease-in 加速，等于贝赛尔曲线（0.42, 0, 1, 1）
ease-out 减速，等于贝塞尔曲线（0, 0, 0.58, 1.0）
ease-in-out 加速然后减速，等于贝塞尔曲线（0.42, 0, 0.58, 1）
cubic-bezier 贝塞尔曲线，自定义时间曲线，（x1, y1, x2, y2）四个值特定于曲线上的点p1和p2，所有值需要在[0, 1]区域内，否则无效。

transition-delay

用来指定一个动画开始执行的时间，也就是当改变元素属性值后，多长时间才开始执行transition效果。默认为0，即立即执行，没有延迟。单位可以是s（秒）或ms（毫秒）。

.fade-in img{
  width: 100px;
  height: 100px;
  background-color: #000000;
  transition: all 1s ease-out 0s;
}

.fade-in img:hover{
  width: 300px;
  height: 300px;
}

变换的根本是矩阵的，过渡的根本是贝塞尔曲线。

动画，animation

CSS animation属性是如下属性的一个简写形式：animation-name，animation-duration、animation-time-function、animation-delay、animation-iteration-count、animation-direction和animation-fill-mode。

在每个动画定义中，顺序很重要，可以被解析为<time>的第一个值被分配给animation-duraction，第二个分配给animation-delay。

图形图像里面一个基础概念就是关键帧，每一个关键帧代表动画的一个过程节点，keyFrames具有自己的语法规则，命名由@keyFrames开头，后面紧接着是这个动画名称加上一对花括号，括号中是一些不同时段样式规则。

 .circle{
    width: 100px;
    height: 100px;
    background: #ddd;
    transition: all 3s ease-in-out 0s;
    border-radius: 50%;
    text-align: center;
    line-height:100px;
    animation: tony 3s infinite ease-in;
    }
@keyframes tony{
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}