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>
  • 相关阅读:
    redis info详解
    redis数据类型-有序集合
    redis数据类型-集合类型
    redis数据类型-列表类型
    python——井字小游戏
    python——元组和字典学习笔记
    docker学习笔记
    中型公司网络架构拓扑与详解
    python——将图片转换为字符编码(linux版的)
    python——冒泡排序练习
  • 原文地址:https://www.cnblogs.com/freefish12/p/5580527.html
Copyright © 2011-2022 走看看