文档章节

Transform/Transition/Animation的区别与联系

Iuranus
 Iuranus
发布于 2015/11/25 11:54
字数 878
阅读 470
收藏 2

Transform,变形:

    首先,它的作用是变形,它是静态的!它是静态的!它是静态的!重要的话说三遍!它就像普通的CSS width/height/color属性一样,让元素展现不同的style,一旦元素被施上transform属性,就直接显示效果只不过它能让元素的style更modern而已。它包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix等功能,当然这些变形分2D跟3D。

    既然是变形,总要基于一个基准坐标位置进行变换,2D有X-Y轴坐标,3D是X-Y-Z坐标,至于具体按照这些坐标上的那个空间点进行变化,则需要依赖transform-origin,它将作用在需要变形的Html元素上,告诉元素如果你要变化了,该围绕着那个基准点进行扭动,不然会摔得很惨。

    参考:w3cplus CSS 2Dw3cplus CSS 3Dw3school CSS 2Dw3school CSS 3D


Transition,过渡:

    首先,它的作用是过渡,是给上述的变形加上时间概念,让它在一段特定的时间里按照特定的速度进行变化(可以指定过渡依赖属性transition-property、过渡时间transition-duration、过渡速率transition-timing-function、过渡时间延迟transition-delay条件)。

    而且它的强大正是可以让元素按照上述条件进行个性化例如某个元素的style将从黄色bgcolor变为蓝色bgcolor,并且通过margin-left右移100px。那么指定transition-propertry为background-color后,背景颜色的改变将按照transition指定的时间(假设为2s)、速率(假设为linear匀速)跟延迟(假设0s不延迟)进行,而右移则是一下子完成。因此当元素style被改变时,你将看到元素一下子向右位移100px,而背景颜色会在2s内从黄色匀速渐变为蓝色。反之如果transition设置在margin-left上,那么颜色是一下子变成蓝色,元素位置则会在2s内匀速移到右边100px处。

    其实费这么大力气用文字解释这个,是为了先知道然。至于所以然,不就是一堆transition参数嘛。


Animation,动画:

    还是首先,它是动画,从效果上可以“肤浅”地认为它是TransitionTransform(或者普通CSS属性)的组合。龙生九子(什么鬼?),但毕竟有所不同:Animation可以通过keyframe显式控制当前帧的属性,什么时候干什么完全能说了算,比Transition更灵活;Transition在过渡之后会改变元素的属性(当然不能完全怪它,它只是让元素“这么着”地从原始属性变为目标属性),而Animation只是模拟元素的属性改变并在一定时间内按照一定速率(这些跟Transition类似)来PLAY动画,动画结束了元素原本长啥样就显示啥样,它拍拍屁股走人,LIKE A PLAYBOY。它们的目的都是让元素能够动起来,至于怎么个手法,它们确实是在如何改变属性值这方面各有千秋。参考:w3cplus CSS3 Animation

先这样吧,饭后再说。


© 著作权归作者所有

共有 人打赏支持
Iuranus
粉丝 11
博文 41
码字总数 22439
作品 0
高级程序员
对transition,transform,animation的疑惑

名词解释 我们先来看一下百度翻译 最后一个animation可以理解,就是动画的意思,类似flash里面的祯动画(你没听过的话就当我没说). 恩恩,颤抖吧!!!英语渣的程序员们.其余三个果然是傻傻分不清楚...

boogoogle
2016/06/14
37
0
【React自制全家桶】八、React动画以及react-transition-group动画库的使用

React动画通常有三种方法实现从易到难为: 1、transition(CSS3自带) 2、animation(CSS3自带) 3、react-transition-group动画库(需要引入插件) 一、transition(CSS3自带) 1、用法示例...

漂泊的雾
08/02
0
0
深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开
2014/04/07
0
0
HTML CSS笔记变形效果-过渡效果-动画效果

一.transform CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform 和 transform-origin。 对于 transform 的属性值,具体如下表: //向...

菜鸟不菜么
05/01
0
0
图片轮播css实现

html 部分 <div class="csslider1 autoplay"> <input name="csanchor1" autocomplete="off" id="csslide10" type="radio" class="csanchor slide" > <input name="csanchor1" autocomplete=......

bengozhong
2016/08/17
117
0

没有更多内容

加载失败,请刷新页面

加载更多

负载均衡的解决方案有哪些

负载均衡器服务可满足大型组织的需求,支持所有数据中心和跨数据中心高可靠性场景。 本地负载均衡,通过附带或者未附带持久性覆盖选项,Incapsula支持各种负载均衡算法,以优化服务器之间的流...

上树的熊
43分钟前
4
0
Java实现在线打开word文档加盖印章/盖章/签名功能

前言: 我们知道,大型一点的OA办公系统都会有很多在线处理office办公文档的需求。其中有一点也基本绕不开,那就是为文档盖章或添加手写签名来保护文档,让被盖章的文档不再被编辑。 在Java中...

山里的红杏
50分钟前
5
0
js控制输入正负数,小数点后保留两位

//限制数字function clearNoNum(obj){ //修复第一个字符是小数点 的情况. if(obj.value !=''&& obj.value.substr(0,1) == '.'){ obj.value=""; } obj.value ...

一直在成长的程序猿
53分钟前
2
0
动态代理

具体场景 为了使代理类与被代理类对第三方有相同的函数,代理类与被代理类一般实现一个公共的interface,定义如下 public interface Subject { void rent(); void hello(String s)...

wuyiyi
57分钟前
2
0
时间字段

我们看看这几个数据库中(mysql、oracle和sqlserver)如何表示时间 mysql数据库:它们分别是 date、datetime、time、timestamp和year。date :“yyyy-mm-dd”格式表示的日期值 time :“hh:...

DemonsI
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部