transition、transform、animation三个属性的使用与区别

原文章：http://www.pianshen.com/article/6672108066/

一、transform：改变元素形状

4个属性
1. rotate：围绕中心点旋转 deg 单位
2. translate（x,y）:向 x y 轴移动位置 px
3. scale：整体缩放倍数、scaleX scaleY 沿轴方向缩放
4. skew(x,y) 切变、scaleX scaleY 沿轴切变

二、transition：过渡，一个元素从一个形状变换到另一个形状。（需要事件触发）

1. transition-property(none/all/indent)：变换的属性
2. transition-duration：转换持续时间，单位 s/ms
3. transition-timing-function(ease/liner/ease-in/ease-out/ease-in-out/cubic-bezier)：变换速率
4. transition-delay：转换开始执行的时间，事件触发后多久执行

transition 连写格式：

连写格式
 transition: property duration animation type delay 
例子:

单个属性property
div{ transition: opacity .35s, transform .35s }
多个属性property 同时变化，用 "," 逗号隔开
div1{
 transition: background-color 1s ease 0.1s,
                width 1s linear 0.1s,
                height 1s ease-in-out 0.1s;
}

PS：因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器 IE 全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀

transition例子

.transform{
    width: 300px; 
    height: 300px; 
    position: absolute; 
    font-size: 22px;
    color: white;
    background-color: brown; 
    -webkit-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    -moz-transition: background-color 1s ease 0.1s ,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    -ms-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    -o-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
 
}
 
.transform:hover{ 
    background-color: gray; 
    width: 350px; 
    height: 350px;
}

transition 例子。

结合transform。transform在这里作为transition 的属性（property）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .effect-box {
            position: relative;
            display: inline-block;
            overflow: hidden;
            width: 250px;
            height: 158px;
            background: rgba(53, 172, 197, 1);
            cursor: pointer}

        .effect-box img {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 1;
            opacity: 1;
            -webkit-transition: opacity .35s;
            transition: opacity .35s
        }

        .effect-box:hover img {
            opacity: .4
        }

        .effect-box .border-line2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 2em;
            font-size: 1.25em;
            color: #fff;
            text-transform: uppercase;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden

        }

        .effect-box .border-line2::after,
        .effect-box .border-line2::before {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 30px;
            content: '';
            opacity: 0;
            pointer-events: none;
            -webkit-transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s
        }

        .effect-box .border-line2::before {
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: scale(0, 1);
            transform: scale(0, 1)
        }

        .effect-box .border-line2::after {
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            -webkit-transform: scale(1, 0);
            transform: scale(1, 0)
        }

        .effect-box:hover .border-line2::after,

        .effect-box:hover .border-line2::before {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        .effect-box .border-line2 p {
            padding: 4px 10px;
            margin: 0;
            font-size: 16px;
            line-height: 1.0;
            text-align: center;
            color: #fff;
            letter-spacing: 1px;
            opacity: 0;
            -webkit-transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0)
        }

        .effect-box:hover .border-line2 p {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

</style>
</head>

<body>
<div class="effect-box">
    <img src="http://pic117.huitu.com/pic/20190409/915016_20190409173546032070_0.jpg">
    <div class="border-line2">

        <p> 319 </p>
        <p> 布局和界面</p>
        <p>Read More</p>

    </div>
    </div>
</div>
</body>
</html>

三、animation动画

0. 用 @keyframes 定义动画名，以及该名称包含的动画需要变化的属性及内容

1. animation-name:元素绑定动画名（@keyframes定义的动画名）

2. animation-duration：动画持续时间

3. animation-timing-function：动画变换速率

4. animation-delay：开始时间。触发动画后多久开始动画

5. animation-interation-count: 循环播放次数。（infinite 是无限次）

6. animation-direction: 动画运动方向（normal/ alternate: 默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。另一个值是alternate，设定animation-direction为alternate，那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite，可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”）

7.animation-play-state(running/pause)：动画的播放状态(其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。)

.animation{
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 22px;
    color: white;
    background-color: brown;
    animation: ccchange 3s ease alternate infinite;
}

@keyframes ccchange {
    0%{
        width: 300px;
        height: 300px;
        background-color: brown;
    }

    40%{
        width: 500px;
        height: 500px;
        background-color: seagreen;
    }

    60%{
        width: 400px;
        height: 400px;
        background-color: coral;
    }

    100%{
    }
}