http://www.cnblogs.com/xiaohuochai/p/5347930.html

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;

触发过渡

单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发,可触发的方式有: 
:hoever :focus :checked 媒体查询触发 javascript触发

局限性

transition的优点在于简单易用,但是它有几个很大的局限。 
(1)transition需要事件触发,所以没法在网页加载时自动发生。 
(2)transition是一次性的,不能重复发生,除非一再触发。 
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 
CSS Animation就是为了解决这些问题而提出的。

animation属性类似于transition,他们都是随着时间改变元素的属性值,其主要区别在于:transition需

要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随

时间变化来改变元素CSS属性,达到一种动画的效果

http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135

transition的用法以及animation的用法的更多相关文章

  1. css3动画(@keyframes和animation的用法)

    animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...

  2. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  3. css3中的transform、transition、translate、animation(@keyframes)的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  4. css3之transition、transform、animation比较

    css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解.    其实, ...

  5. Animation.Sample用法介绍

    无意中翻到这篇问答LINK,发现了Sample的用法 如果想让Animation在编辑器状态下预览,也可以用这个接口 当你想要直接获得动画的运行结果,而不是等帧数执行到这,这时候就得调用Sample: ...

  6. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  7. iOS中block的用法 以及和函数用法的区别

    ios中block的用法和函数的用法大致相同 但是block的用法的灵活性更高: 不带参数的block: void ^(MyBlock)() = ^{}; 调用的时候  MyBlock(); 带参数的 ...

  8. transition代替简单的animation注意事项

    一. transition 和 animation  不支持    Internet Explorer 9,以及更早的版本. 二. 要变化的属性 transition-property:要变化的属性, ...

  9. async4j 普通用法、整合spring用法

    1.普通用法 asyn4j 是一个java异步方法调用框架,基于消费者与生产者模式. async4j就是基于Executors线程池和反射机制实现的. 包括了异步方法执行,异步回调执行,异步工作缓存模 ...

随机推荐

  1. 通过JdbcTemplate编写数据访问(二十八)

    数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. 首先,为了连接数据库需要引入jdbc支持,在pom.xml中引入如下配置: 1 2 3 4 < ...

  2. linux因勿删或误操作导致登录界面异常,命令无法使用,显示/bin/bash:No such file or directory

    一.故障现象 1.用secure CRT连接服务器时显示: /bin/bash:No such file or directory 翻译成中文是:没有此类文件或目录 2.直接登录服务器执行命令时显示: ...

  3. Linux 第一周作业

    [](http://images2017.cnblogs.com/blog/1249774/201710/1249774-20171001234038872-10d31233192.pngd

  4. 关于scratch导出的flash画质很差的问题解决方案

    Scratch的分辨率是480*360,因此把scratch文件转变为flash时,因影像和画质很差,把flash插入到ppt幻灯片后,影像和画质仍然得不到保证.经过不断摸索,这个问题终于得到解决,关 ...

  5. commons-logging,log4j和jdklog的调用方式

    commons-logging包含log4j和jdklog. commons-logging: Log log= LogFactory.getLog(getClass());//commons log ...

  6. It is never too late!

    整理着过去的学习笔记,零零碎碎的,偶尔夹杂着当时的心境. 泛泛的学着东西,不很系统,不很深入,倒像是在拾海,有时捡捡贝壳,有时抓抓螃蟹.叹服大海的神奇,还没来得及深钻某个领域. (以下内容写于2016 ...

  7. MyEclipse教程:使用UML创建模块库——第二部分(一)

    MyEclipse 在线订购年终抄底促销!火爆开抢>> [MyEclipse最新版下载] UML2建模文件存储在建模存储库中,建模可用于生成Java代码,或者可以从代码生成模型. 本教程介 ...

  8. DOM&BOM

    文档对象模型(Document Object Model) 来源:文档对象模型(Document Object Model)的历史与20世纪90年代末Netscape Navigator和Micros ...

  9. linux,windows下日志文件查找关键词

    1.查找 /apps/tomcat/tomcat3/apache-tomcat-7.0.69/logs 目录下已.txt结尾的文件,在文件中搜索关键字 IfcmpEcrService并打印行号 /lo ...

  10. <Java><类与对象><OOP>

    Overview 类 封装(encapsulation): 也称为数据隐藏.从形式上看,是将数据与行为组合起来,并对对象的使用者隐藏了数据的实现方式.封装给对象赋予了黑盒特征,提高重用性和可靠性. 继 ...