1. 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

过渡效果一般由浏览器直接改变元素的CSS属性实现。

1.1 属性

transition：简写属性，用于在一个属性中设置四个过渡属性。
- 必须指明持续时间
- 如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
transition-property：规定应用过渡的 CSS 属性的名称。
- 多个属性间使用,隔开
- 如果所有属性都需要过渡，则使用all关键字（默认值）
- 大部分属性都支持过渡效果
- 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration：定义过渡效果花费的时间。默认是 0。
- 时间单位：s和ms
transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。
- ease 默认值，慢速开始，先加速后减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速（与ease的区别）
- cubic-bezier() 指定时序函数
- steps() 分步执行过渡效果，第一个参数表示分几步，第二个参数可选：
  - end 在时间结束时执行过渡（默认值）
  - start 在时间开始时执行过渡
transition-delay：规定过渡效果何时开始（延迟）。默认是 0。

注：transition中的过渡效果花费的时间和延迟时间都是以秒(s)或毫秒(ms)计。请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

先来看看一个示例：

一开始是一个100px*100px的蓝色矩形元素当鼠标浮动在元素上，经过3s 延迟（第二个3s），会开始匀速变化（linear），变化时间为3s（第一个3s）,最后宽度变为300px,背景颜色变为红色。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: width ,background-color ,3s linear 3s;
        }
        div:hover{
            width: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.2 与动画的区别

不同于动画，虽然它们都是随着时间改变元素的属性值，但是transition（过渡）需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

动画不需要事件触发，过渡需要。
过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。

2. 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

2.1 属性

animation,是一个简写属性，用于设置动画属性
- 必须指定动画的关键帧名称和持续时间
- 如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
animation-name,指定动画的关键帧名称
animation-duration,指定动画效果的持续时间
animation-timing-function,动画的时序函数，详细参考过渡
animation-iteration-count,动画执行的次数,其中infinite是无限次
animation-delay动画效果的延迟，等待一段时间后在执行动画
animation-play-state 设置动画的执行状态
- running 动画执行，默认值
- paused 动画暂停
animation-fill-mode 动画的填充模式
- none 动画执行完毕，元素回到原来位置，默认值
- forwards 动画执行完毕，元素会停止在动画结束的位置
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards和backwards
animation-direction,定义是否应该轮流反向播放动画。
- normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
- alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。
- reverse 反向运行动画，每周期结束动画由尾到头运行。
- alternate-reverse 反向交替，反向开始交替动画,第一次运行时是反向的，然后下一次是正向，后面依次循环。

这里再给一个简单的代码例子，有兴趣可以自己运行看看效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height:100px;
            background: blue;
            animation: donghua 3s linear 1ms infinite normal;
        }
        /* div:hover{
            
        } */
        @keyframes donghua{
            from{
                background: yellow;
            }
            50%{
                background: brown;
            }
            to{
                width: 300px;
                background: red;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3. 变换

通过 CSS3 变换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。使用transform属性为元素应用变换。

translate(长度值或者百分比) 在水平方向上、垂直方向上平移元素。transform属性可以指定为关键字值none 或一个或多个<transform-function>值。

3.1 常用的**：

2D平移—translate()、translateX()、translateY()

用来在平面上平移一个元素。可以使用translate(tx) 或translate(tx, ty)，第一个参数指定x轴的平移距离，第二个参数指定y轴的平移距离。如果只指定了一个参数，那么X和Y轴都采用整个值。
3D平移—translate3d()和translateZ()

用于在3D空间中移动元素的位置。
旋转—rotate()
- rotateX() 沿着x轴旋转
- rotateY() 沿着y轴旋转
- rotateZ() 沿着z轴旋转
- backface-visibility 属性可以设置元素背面是否可见，可以隐藏旋转元素的背面。可选值：
  - visible 默认值，背面可见
  - hidden 背面不可见
缩放—scale()，

可以用来改变元素的大小。它可以增大或减小元素的大小。
- scaleX() 水平方向缩放
- scaleY() 垂直方向缩放
- scale() 双方向的缩放
拉伸—skew()

是一种用于拉伸的函数，该函数会使得在每个方向上扭曲元素上的每个点以一定角度.skew(ax) 或skew(ax, ay)。（如果觉得难以理解可以去看看这篇博客—奋斗小青年的博客）