transition的优点在于简单易用,但是它有几个很大的局限。

(1)transition需要事件触发,所以没法在网页加载时自动发生。

(2)transition是一次性的,不能重复发生,除非一再触发。

(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

transition的使用注意

(1)目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。

(2)不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果

(3)transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。

transition的局限的更多相关文章

  1. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

  2. transition和animation动画简介

    本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出每一条属性的详尽介绍,那样可以写一本书.这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不 ...

  3. css3 tranform  transition animation

    tranform:对象图形变形 tranform的属性包括:   1.none 表示不进行变换:   2.rotate 旋转            transform:rotate(20deg) 旋转 ...

  4. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  5. animation与transition的简单讲述

    CSS动画分为两大组成部分:transition和animation 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的.也就是说,所有的状态变化,都是即时完成. tran ...

  6. css3 动画 Transition

      CSS Transition 1.1 基本用法 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的.也就是说,所有的状态变化,都是即时完成. 上面是一个演示,当鼠标放置 ...

  7. css 动画 transition和animation

    本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...

  8. 大厂前端带来css3动画transition的使用和介绍全新认识动画

    CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体 ...

  9. CSS3的新属性的一下总结

    阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,tran ...

随机推荐

  1. 数据库表-DD01L DD02L DD03L-保存数据表和域的消息

    DD01L 定义域 DD02L SAP-表,记录每张数据库表和自定义表的表相关信息 DD03L 定义字段,记录数据表和自定义表中每个字段相关信息

  2. android ImageSwitcher

    <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android=&q ...

  3. Java反射中的getClass()方法

    Java反射学习 所谓反射,可以理解为在运行时期获取对象类型信息的操作.传统的编程方法要求程序员在编译阶段决定使用的类型,但是在反射的帮助下,编程人员可以动态获取这些信息,从而编写更加具有可移植性的代 ...

  4. Android项目实战(十一):moveTaskToBack(boolean ) 方法的使用

    当你开发的程序被按后退键退出的时候, 你肯定不想让他就这么被finish()吧,那么就想把程序退置到后台就可. (类似于PC端,你关闭一个浏览器和你最小化一个浏览器的区别) 参看方法:public b ...

  5. 挣值管理(PV、EV、AC、SV、CV、SPI、CPI)记忆之我见

    挣值管理(PV.EV.AC.SV.CV.SPI.CPI)记忆之我见 挣值管理法中的PV.EV.AC.SV.CV.SPI.CPI这些英文简写相信把大家都搞得晕头转向的.在挣值管理法中,需要记忆理解的有三 ...

  6. C++函数模板

    函数模板提供了一种函数行为,该函数行为可以用多种不同的类型进行调用,也就是说,函数模板代表一个函数家族,这些函数的元素是未定的,在使用的时候被参数化. 本文地址:http://www.cnblogs. ...

  7. Maven&&Ant使用

    “使用操作系统环境为CentOS-6.5” Ant使用 Maven使用 “Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设 ...

  8. Windows Server 2012 R2下通过80端口访问Odoo ERP

    背景 Odoo 9.0系统,安装于Windows Server 2012R2,同时与IIS并存.Odoo自带web服务器,使用端口8069.因客户需要用80端口访问,因此需要进一步设置,且8069端口 ...

  9. Jquery Easy UI--datagrid的使用(转)

    第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样cl ...

  10. 被废弃的 Thread.stop, Thread.suspend, Thread.resume 和Runtime.runFinalizersOnExit

    最近学习多线程的知识,看到API里说这些方法被废弃了,就查了一下原因 Thread.stop 这个方法会解除被加锁的对象的锁,因而可能造成这些对象处于不一致的状态,而且这个方法造成的ThreadDea ...