属性 含义
   
transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同
transform(变形) 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”
translate(移动) translate只是transform的一个属性值,即移动。

首先我们看上图,3个单词的解释。

translate:移动,transform的一个方法

              通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
          用法transform: translate(50px, 100px);
              -ms-transform: translate(50px,100px);
              -webkit-transform: translate(50px,100px);
              -o-transform: translate(50px,100px);
              -moz-transform: translate(50px,100px);
 
transform:变形。改变
                 CSS3中主要包括 旋转:rotate() 顺时针旋转给定的角度,允许负值 rotate(30deg)
                   扭曲:skew() 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:skew(30deg,20deg)
                   缩放:scale() 放大或缩小,根据给定的宽度(X 轴)和高度(Y 轴)参数: scale(2,4)
                   移动:translate() 平移,传进 x,y值,代表沿x轴和y轴平移的距离
                   改变起点位置 transform-origin: bottom left;            
                   综合起来使用:transform: 30deg 1.5 30deg 20deg 100px 200px;
 
transition: 允许CSS属性值在一定的时间区间内平滑的过渡,
            需要事件的触发,例如单击、获取焦点、失去焦点等
            transition:property duration timing-function delay;
                   property:CSS的属性,例如:width height 为none时停止所有的运动,可以为transform
                   duration:持续时间
                   timing-function:ease等
                   delay:延迟
                 语法 transition:需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行   
                 例如:transition:width 2s ease 0s;

CSS3中很容易混淆的transform,translate,transition。如何去区分,以及综合写法。的更多相关文章

  1. CSS3:transform translate transition 这些都是什么?

    transform:一个属性名称,即CSS3 2D转换 属性. translate:一个属性函数,用法是translate(dx,dy) div { transform: translate(50px ...

  2. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  3. transform translate transition 的区别

    transform是变形,下面有translate transform: rotate旋转/scale缩放/skew扭曲/translate移动/matrix矩阵变形transform连写:rotat ...

  4. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  5. css3中的提供的元素变化属性

    通过 CSS3 提供的2d元素转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. css3中为我们 提供了: translate() rotate() scale() skew() matrix( ...

  6. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  7. CSS3中translate、transform和translation的区别和联系

    translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...

  8. css3中的transform、transition、translate、animation(@keyframes)的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  9. css3中的translate,transform,transition的区别

    translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...

随机推荐

  1. concurrentHashMap求size

    在 JDK1.7 中,首先会使用不加锁的模式去尝试多次计算 ConcurrentHashMap 的 size,最多三次,比较前后计算的结果,结果一致就认为当前没有元素加入,计算的结果是准确的.如果不符 ...

  2. 什么是HTML?

    html是很多人编程的入门领域.作为初学者,不管你是在哪里学的,学校,视频教程,网络教程等等……它们都会告诉你HTML即:超文本标记语言(Hyper Text Markup Language).但第一 ...

  3. 基于centos7+nginx+uwsgi+python3+django2.0部署Django项目

    0.序言 本文讲解如何基于centos7+nginx+uwsgi+python3+django2.0把windows上的本地项目部署到云服务器上. 本文服务器上的django项目和虚拟环境的路径将建立 ...

  4. Find out where to contain the smartforms

    Go to table E071 and give smarforms name and it will give the transport req for that. Run SE03, choo ...

  5. SVN chechout 错误: xxx is not valid as filename in directory

    转载:https://blog.csdn.net/ClementAD/article/details/47838989 意思就是Linux系统允许文件或文件夹的名字包含空格,而windows是不允许的 ...

  6. js项目练习第二课

    百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...

  7. 使用fiddler模拟session失效的测试方法

    1.Fiddler的基本界面 2.json串放入本地txt文件中 例如, test.txt: {"retCode": "200","Msg" ...

  8. Vmware Workstation添加centos 7系统网络问题(无IP情况)

    简单配置 命令行输入ip addr 查询不到IP的情况,如下: 解决办法: 1. vi  /etc/sysconfig/network-scripts/ifcfg-ens33 2. 最后一行,ONBO ...

  9. There is no getter for xxx 或者 will not be managed by Spring 解决

    今天使用mysql 的sql查询语句的时候(我是用的是ssm框架) 下面是我的查询语句,条件是根据business_id 和card_status 两个参数获取值 select  * from tb_ ...

  10. c语言基础课第一次作业

    1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 通过阅读邹欣老师的博客,了解到了老师心中理想的师生关系是(健身教练与健身学员).在初中,高中我们一直都是填鸭式教育,像 ...