文档章节

Transform/Transition/Animation的区别与联系

Iuranus
 Iuranus
发布于 2015/11/25 11:54
字数 878
阅读 469
收藏 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
图片轮播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
HTML CSS笔记变形效果-过渡效果-动画效果

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

菜鸟不菜么
05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
9分钟前
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
43分钟前
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
0
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
2
0
设计模式之五 责任链模式(Chain of Responsibility)

一. 场景 相信我们都有过这样的经历; 我们去职能部门办理一个事情,先去了A部门,到了地方被告知这件事情由B部门处理; 当我们到了B部门的时候,又被告知这件事情已经移交给了C部门处理; ...

JackieRiver
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部