zoukankan      html  css  js  c++  java
  • css中关于transform、transition、animate的区别

    写动画经常会用到这几个属性,他们之间有什么区别呢?

    1.transform

      每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性。它其实只是一个静态属性,需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样,只是一个静态样式而已。

    它可以让元素偏移、伸缩、变形、旋转等。

    具体的给设计师改变元素样式用的属性则有以下五个:
    
    translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;
    rotate(deg)是用来控制元素旋转角度的;
    skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;
    scale3d(x,y,z) 用来放大缩小效果,属性是比值;
    matrix3d,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用。

    2.transition

      它属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。

    <div class="transform"></div> 
    
    .transform{
            100px;
            height:100px;
            background: red;
            transition: all 1s ease-out;
        }
        .transform:hover{
            transform:rotate(360deg);
        }

    3.Animation 

      详细讲解请看我的另外一篇文章:http://www.cnblogs.com/freefish12/p/5510210.html

    
    

    .context{
    100px;
    height:100px;
    background: blue;
    left:0;
    position:absolute;
    }


    @keyframes move{ from{ transform: rotateY(180deg); } to{ transform: rotateY(360deg); } } .context:hover{ animation: move
    0.5s infinite alternate; } <div class="context"> <div class="sub-context"></div> </div>
  • 相关阅读:
    单链表
    队列
    产品经理们,遇到Bug请别十万火急
    2008年7月3日
    JS URL 参数
    NET 产品版权保护方案 (.NET源码加密保护)
    常用正则表达式
    网线接法
    C#创建多文档的界面
    TGE学习笔记04 billboard
  • 原文地址:https://www.cnblogs.com/freefish12/p/5580527.html
Copyright © 2011-2022 走看看