transition、transform 和 animation的区别

工作中不可避免的要使用transition、transform或者animation，有的小伙伴可能很少使用，所以经常忘记或弄混这几个的用法，这里给他们总结归纳一下，希望对你会有帮助 ~-~

transtion 过渡

transition 的过渡属性与意义

1. transition-property ： 过渡效果的属性，如：width
2. transition-duration ： 过渡效果所用的时间
3. transition-timing-function ：过渡效果的速度曲线
4. transition-delay ：过渡效果的延迟时间

简写语法：

transition: property duration timing-function delay；

实例

html：

    <!-- transition 过渡 -->
    <div class="transition">鼠标移上来试试transition</div>

css：

        .transition{
            width:100px;
            height:100px;
            background:yellow;
            transition:width 2s;
            -moz-transition:width 2s; /* Firefox 4 */
            -webkit-transition:width 2s; /* Safari and Chrome */
            -o-transition:width 2s; /* Opera */
        }

        .transition:hover {
            width:300px;
        }

*注：timing-function 可选的几种情况如下

• linear ：速度从头到尾保持一致
• ease ：低速开始 - 加速 - 降速结束
• ease-in ：低速开始
• ease-out ：低速结束
• ease-in-out ：低速开始 - 匀速 - 降速结束

transition参考资料传送门

---

transform 移动 旋转 变形 缩放

transform 的几种功能

1. translate(x, y) 平移
2. rotate(anger) 旋转
3. skew(x-anger, y-anger) 变形
4. scale(x, y) 缩放

简写语法：

transform: none | transform-function；

实例

html:

    <!-- transform 移动、旋转、扭曲、缩放 -->
    <div style="padding-left: 50px">
        <div class="transform translate">translate</div>
        <div class="transform rotate">rotate</div>
        <div class="transform skew">skew</div>
        <div class="transform scale">scale</div>
        <div class="transform all">all</div>
    </div>

css:

        .transform{
            width: 300px;
            height: 200px;
        }
        .translate {
            background: pink;
            transform: translate(50px, 10px)
        }
        .rotate {
            background: palegreen;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }
        .skew{
            background: palegoldenrod;
            -webkit-transform: skew(3deg, 6deg);
            -moz-transform: skew(3deg, 6deg);
            -o-transform: skew(3deg, 6deg);
            transform: skew(3deg, 6deg)
        }
        .scale {
            background: paleturquoise;
            -webkit-transform: scale(.8, .4);
            -moz-transform: scale(.8, .4);
            -o-transform: scale(.8, .4);
            transform: scale(.8, .4)
        }

transform参考资料传送门

---

animation 动画

transition 的动画属性与意义

1. animation-name：绑定到选择器的keyframe名称
2. animation-duration：动画需要的时间
3. animation-timing-funciton：动画的速度曲线
4. animation-delay：动画延迟时间
5. animation-iteration-count：动画重复播放的次数
6. animation-direction：是否反向播放动画

简写语法：

animation: name duration timing-function delay iteration-count direction；

实例

html:

<!-- animation 动画 -->
<div class="animation">animation</div>

css:

        .animation{
            width: 200px;
            height: 200px;
            background: peru;
            animation: move 3s ease 1s 10 alternate
        }
        @keyframes move {
            form{
                margin-left: 50px;
            }
            to{
                margin-left: 150px;
            }
        }

*注：animation-timing-direction 可选的情况

animation-timing-direction：normal / iteration

animation的参考资料传送门