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的参考资料传送门

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页