Transform

根据我的理解,transform和width、height、background一样,都是dom的属性,不同的是它是css3旗下的,比较屌,能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸,跟canvas上的某些api神似,这么说来transform好像能干些js才能干的事。

transform分2D变换和3D变换,w3school中有很好的介绍和例子

Transition

注意:在变换属性时,变换前的属性值必须定义;不然会没有效果;

例:想让width从   100px  --->  200px  时,前边的100px必须指明。主要用在    img   的 宽高是要注意

transition的解释是过渡,我的理解是css之间的变换,但是这个变换很屌很平滑,类似动画。举个栗子,一开始某个dom的类是classA,通过某种操作(比如被点击了)后变成了classB,如果没有transition,类之间的变换是很快的,机械般瞬间完成,但是有了transition,这便会是一个很缓和平滑的过程。

transition有4个属性:语法:transition: property duration timing-function delay  从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”(默认值:all 0 ease 0 前两个是必须的 后两个可省略)。

过渡属性:

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

Animation

Animation的解释是动画,加强版的transition。

如果说transition能实现某些js效果,animation就更像是js了。类似于写一个canvas特效,特效总共比如说多少时间,我们能规定在什么时候该出现什么样的场景,而各个场景间的转换则完全由css3本身负责,而keyframes好比定义了一个js方法。

主要应用在某个元素需要进行连续的n次css变换。

动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

CSS-Transform-transition-Animation的更多相关文章

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

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

  2. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

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

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

  4. css 动画 transform transition animation

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

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

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

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

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

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

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

  8. CSS3之 transform和animation区别

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

  9. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  10. Atitti css transition Animation differ区别

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

随机推荐

  1. CF Gym 100685E Epic Fail of a Genie

    传送门 E. Epic Fail of a Genie time limit per test 0.5 seconds memory limit per test 64 megabytes input ...

  2. Scrapy中的item是什么

    这两天看Scrapy,看到item这个东西,觉得有点抽象,查了一下,有点明白了. Item 是保存爬取到的数据的容器:其使用方法和python字典类似, 并且提供了额外保护机制来避免拼写错误导致的未定 ...

  3. P1049送给圣诞夜的礼品(矩阵十大问题之四)

    https://vijos.org/p/1049 P1049送给圣诞夜的礼品 Accepted 标签:组合数学送给圣诞夜的礼物[显示标签]     返回代码界面 | 关闭   Pascal Pasca ...

  4. tomcat管理员配置

    纸上得来终觉浅,绝知此事要躬行 博客园 首页 新闻 新随笔 联系 管理 随笔- 458  文章- 0  评论- 38  Tomcat的Manager显示403 Access Denied   管理to ...

  5. Effective Java之最佳建议

    #Effective Java之最佳建议 此书中,目前给我帮助最大的两条建议是: - 检查参数的有效性 - 不要忽略异常 ###检查参数的有效性 对于这一条,使我感同身受的原因是:在Web项目中,前期 ...

  6. JS触发事件大全

          事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠 ...

  7. ON THE EVOLUTION OF MACHINE LEARNING: FROM LINEAR MODELS TO NEURAL NETWORKS

    ON THE EVOLUTION OF MACHINE LEARNING: FROM LINEAR MODELS TO NEURAL NETWORKS We recently interviewed ...

  8. 一大早居然有骗子还是傻子,真是莫名其妙的,QQ1913522040,一看就是刚申请不久的

  9. ps 倒影制作

    首先打开PS并打开一张素材,这里我选择了山水图片,制作山峰在水中的倒影效果.   然后按下[Crrl+J]复制这个图层,如图:   接着按下[Ctrl+T]或者是[编辑][自由变换],打开[自由变换] ...

  10. ALTER 语句修改数据表

    1.修改数据表名:alter table 表名 rename 新表名; 2.修改列名: alter table 表名 change 列名 新列名(可以与旧的一样) 类型 默认值; 3.修改类型: al ...