过渡

过渡相关属性

transition-property：要过渡的CSS属性的名字（如background-color、text-shadow或者all，all会过渡所有可以过渡的属性）
transition-duration：定义过渡效果持续的时间（用秒进行定义，例如.3s、2s或1.5s）
transition-timing-function：定义过渡期间的速度变化（例如ease、linear、ease-in、ease-out、ease-in-out或者cubic-bezier，默认为ease）
transition-delay：可选，用于定义过渡开始前的延迟时间。相反，将值设置为一个负数，可以让过渡效果立即开始，但过渡旅程会在半路结束（同样是用秒进行定义，例如.3s、2s或1.5s）

.style {
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

过渡的简写语法

我们可以把这些独自的属性组合成一个简写版：

1
2
3

.style {
    transition: all 1s ease 0s;
}

需要注意的是，当使用简写语法的时候，第一个和时间相关的值会被应用给transition-duration，而第二个则会被应用到transition-delay上。

尽量只定义那些你真的需要过渡的属性。定义成all是十分方便，但是如果你只需要过渡透明度，那么就把transition-property设成opacity，否则你会加重浏览器的负担

在不同时间段内过渡不同属性

当一条规则要实现多个属性过渡时，这些属性不必步调一致

.style {
    transition-property: border, color, text-shadow;
    transition-duration: 2s, 3s, 8s;
}

此处我们首先指定要过渡的属性，然后在分别为它们指定不同的过渡时间，不同过渡之间用逗号分隔

变形

虽然两个英文单词发音相似，但变形和过渡完全不同。可以这么理解：过渡是从一种状态平滑转换到另一种状态，而变形则定义了元素将会变成什么样子。

变形原点

元素的默认变形原点为正中心，即元素X轴的50%和Y轴的50%处。

你可以使用transform-origin来改变变形原点的位置。如果给它传递数值，则代表需要相对于正中心的偏移量。如果给它传递百分值，则表示要将变形原点移动到对应轴的对应百分比处。

如何变形

CSS的变形是通过transform属性实现的，下面列表中的内容具体的形变种类

scale()：用来对元素进行缩放。如果给定一个值，则X轴和Y轴同时按照这个值进行缩放。如果给定两个值，则分别对应X轴和Y轴的缩放系数。如果还有第三个值，那这个值对应Z轴的缩放系数。当值为负数时，首先在对应方向上将元素镜像，然后在进行缩放。
translate()：用来移动元素。用法与scale()相同，如果使用百分值，那么是相对于元素自身的百分比。
rotate()：使元素围绕变形原点进行旋转。如果角度为正，那么顺时针方向旋转。反之则逆时针方向。
skew()：沿X轴和Y轴对元素进行斜切。对X轴进行斜切时，以变形原点为中心让X轴顺时针旋转。对Y轴进行斜切时，以变形原点为中心让Y轴逆时针旋转。
matrix()：允许你以像素精度来控制变形效果。以后理解更深刻的时候再回来整理。

perspective

perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三位元素比正常大，反之则小。

动画

首先，我们创建一个关键帧规则

@keyframes pulse {
    100% {
        text-shadow: 0 0 5px #bbb;
        box-shadow: 0 0 3px 4px #bbb;
    }
}

如你所见，在@keyframes关键词后我们定义了一个新的关键帧规则，并且给这个动画命了名。

我们这里只定义了一个简单的关键帧选择器：100%。然而，你也可以设置多个关键帧选择器（用百分比定义）。你可以把它们想像成时间轴上的点。例如，10%的时候背景变成蓝色，30%的时候背景变成紫色，60%的时候让元素变得透明，等等。

在支持的浏览器中，from代表0%，to代表100%。

如果定义了负值或者大于100%的关键帧，它会被忽略。

与过渡的transition相对应，动画使用animation属性。它也是一个缩写属性，当然你也可以不采用缩写形式而使用下面例子中的形式，可选值已用|分隔表示

.animation-properties {
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end;
    animation-iteration-count: infinite | n;
    animation-play-state: running | paused;
    animation-delay: 0s;
    animation-fill-mode: none | forwards | backwards | both;
    animation-direction: normal | reverse | alternate | alternaterverse;
}

<body>
    <style>
        #container {
            width: 200px;
            height: 200px;
            position: relative;
            background: green;
        }
        #item {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            background: red;
            animation-name: bounce;
            animation-duration: 1.5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        @keyframes bounce {
            0% {
                top: 0;
            }
            50% {
                top: 100px;
            }
            100% {
                top: 180px;
            }
        }
    </style>
    <div id="container">
        <div id="item"></div>
    </div>
</body>