Transform

在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。

关于图形变形的基础条件当中的原点设定,在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的(有待研究)。其他的属性则根据这个属性来计算进行计算。

关于图形变化的模式,css3标准当中transform-style来定义。默认是flat,展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说,应该只需要preserve-3d就好了,但是从谣传“开启了perserve-3d就使用了GPU加速”来说,这个属性可能是为了降低系统消耗用的,毕竟3d比2d要多一个维度的计算。

如果需要使用3d模式,必须先指定style为3d,并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。

具体的给设计师改变元素样式用的属性则有以下五个:

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

总体看来 css transform的属性和原来使用的left ,right ,top, bottom 的属性从动静角度来说没有任何区别,因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

Transition

transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。比如你有如下两个样式:

.position{
left:100px;
top:100px;
}
.animate{
-webkit-transition:left 0.5s ease-out;
left:500px;
top:500px;
} eg:banner slider 横幅移动
setInterval(function(){

		if(index == 4){
   $(".banner").transition({ x: "0px"});
     index = 1;
   }else{
     move(1);
}
},5000);
 

其中animate的transition的属性的意思说:当你的left属性发生变化的时候,执行动画效果(仅仅基于left的属性变化,其他的属性不会加入到动画变化里面去);

首先你的元素的css为position。当你将其cssList 增加 animate 或者替换position 为animate的时候,元素的属性变化,触发webkit-transition,以指定属性变化前的值为起始值,变化后的属性为结束值,执行动画效果。这是一个简单的两点变化过程,大大简化了animation属性的复杂程度。

同时,如果在transition的动画当中,属性值有了新的变化,则会中断当前的动画执行,并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

我在css编写的时候,因为变化的属性只有transform一个,因此在transtion属性里面指定响应属性为all,可以响应并执行元素所有属性的变化动画(能做动画的属性)。

Animation

在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西:keyframes

做过Flash动画的人都会知道,Flash里面有两个基础武器:时间轴和关键帧。而css keyframes的出现,则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例:

@keyframes 'wobble'{
0%{
left:100px
}
30%{
left:300px;
}
100%{
left:500px;
}
}
.animate{
left:100px;
-webkit-animation:wobble 0.5s ease-out;
-webkit-animation-fill-mode:backwards;
} eg div 动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.div1
{
width:100px;
height:100px;
background:red;
position:relative;
z-index:99;
animation:mymove 2s steps(3) infinite;
-webkit-animation:mymove 2s steps(3) infinite; /*Safari and Chrome*/
-webkit-animation-fill-mode:backwards;
margin:0;
padding:0;
pisition:relative;
top:0;left:0;
} @keyframes mymove
{
from {left:0px;}
to {left:300px;}
} @-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:300px;}
}
</style>
</head>
<body> <p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
<div class="div1"></div>
<div style="width:100px;height:200px;background-color:yellow;position:absolute;top:0;left:0;"> </div>
</body>
</html>



上面这个代码展示了一个keyframes 'wobble',其中 0% 代表在变化中不同时间点的属性值,你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是,keyframes提供更多的控制,尤其是时间轴的控制,这点让css animation更加强大,使得flash的部分动画效果可以由css直接控制完成,而这一切,仅仅只需要几行代码,也因此诞生了大量(比起flash来说算是大量了)基于css的animation tools,用来取代flash的动画部分。关于动画工具,可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是:animation-fill-mode,这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式,保证动画的整体连贯。

reference:http://www.cnblogs.com/aimyfly/p/3195898.html

transform、transition、animation 区别的更多相关文章

  1. CSS3之 transform和animation区别

    CSS3 有3种和动画相关的属性:transform, transition, animation.其中 transform 描述了元素静态样式.而transition 和 animation 却都能 ...

  2. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  3. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  4. css3的新特性transform,transition,animation

    一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...

  5. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  6. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  7. css—动画(transform, transition, animation)

    transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...

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

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

  9. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  10. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

随机推荐

  1. LimeSDR 无线信号重放攻击和逆向分析

    原文链接:https://mp.weixin.qq.com/s/TBYKZR3n3ADo4oDkaDUeIA

  2. 异常处理——java基础

    Evernote Export 异常处理   异常处理的套路模板: try//创建异常处理{   throw new();//抛出异常 //一旦有异常, 抛出异常后,后面的语句不再执行 语句;{ …… ...

  3. ES6 模板字符串Template String

    1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...

  4. iOS跳转第三方应用举例一号店和京东

    1.首先要跳转到第三方应用都需要知道第三方应用的scheme,虽然百度能得到很多,但是不乏一些新增的或者改了的,怎么获得APP的scheme,鉴于现在iTunes不好用了,介绍一个app ---app ...

  5. 用awk检查报表的列数

    用awk检查报表的列数 前提当然是报表都有相同数量的列 less yourfile|awk ‘{print NF;exit;}’ NF是awk的内置变量,表示当前记录里域的个数,不难看出,这个命令实际 ...

  6. python从零开始 -- 第1篇之环境搭建

    事实上,网络上有很多相应的教程,本文无意做成文章的粘贴展示板,附上我认为的简易的安装详解: 安装 Python 环境(编程小白的第一本 Python 入门书),包含了python以及相关的IDE,图文 ...

  7. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  8. Stackoverflow热门问题

    1. JavaScript如何重定向到其他网页 如何使用JavaScript将用户从一个网页重定向到另一个网页? 2. JavaScript闭包是如何工作的 只知道JavaScript闭包的概念,但是 ...

  9. javap反汇编命令

    https://blog.csdn.net/qq_36330643/article/details/73841313 有关反汇编的具体

  10. Struts2 2.5版本的通配符和动态方法调用的问题

    Struts2.5版本之后,使用通配符的时候出现错误 配置的四个action,使用通配符和动态方法的时候找不到其中的update方法后来经过查找才知道原来是版本加了一个 <action name ...