http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

第一部分:CSS Transition

在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。

delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。

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的局限

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

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

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

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

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

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

第二部分:CSS Animation

首先,CSS Animation需要指定动画一个周期持续的时间,以及动画效果的名称。


div:hover {
animation: 1s rainbow;
}

上面代码表示,当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。


@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

同transition一样,animation也是一个简写形式。


div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}

这是一个简写形式,可以分解成各个单独的属性。


div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}

浏览器前缀

目前,IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀。

也就是说,实际运用中,代码必须写成下面的样子。


div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
} @-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
} @keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

css动画——transition和animation的更多相关文章

  1. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  2. css 动画 transition和animation

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

  3. CSS动画-transition/animation

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

  4. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  5. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

  6. css动画 transition

    比如输入框触交渐变 在原来的属性添加 : .form-control{-webkit-transition: all .3s; transition: all .3s;} .form-control: ...

  7. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  8. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. css 动画 transform transition animation

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

随机推荐

  1. java开发 时间类型的转换

    1.String转date SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Strin ...

  2. 多线程与网络之SDWebImage和NSCache

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  3. 树-红黑树(R-B Tree)

    红黑树概念 特殊的二叉查找树,每个节点上都有存储位表示节点的颜色是红(Red)或黑(Black).时间复杂度是O(lgn),效率高. 特性: (1)每个节点或者是黑色,或者是红色. (2)根节点是黑色 ...

  4. VS2010手动添加外部工具和快捷键

    一.添加外部工具 1.选择工具->外部工具 2.选择添加,然后填相应的程序路径和传给程序的参数. 标题:所创建的工具名字 命令:工具路径 参数:工具命令行参数 初始目录:工具工作目录,有些工具可 ...

  5. jsonp实现跨域请求

    在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. $.ajax({ async ...

  6. 软件开发中的单一职责(转至INFOQ)

    最近在实践微服务化过程中,对其“单一职责”原则深有体会.那么只有微服务化才可以单一职责,才可以解耦吗?答案是否定的. 单一职责原则是这样定义的:单一的功能,并且完全封装起来. 我们做后端Java开发的 ...

  7. 10段实用的HTML5代码

    1.HTML5编写的CSS ResetCSS Reset也可以写成Reset CSS,即重设浏览器样式. /*   html5doctor.com Reset Stylesheet (Eric Mey ...

  8. @@IDENTITY与SCOPE_IDENTITY的用法

    SCOPE_IDENTITY   和   @@IDENTITY   的作用都是取得返回在当前会话中的任何表内所生成的最后一个标识值,简单的说就是在执行一条插入语句之后使用@@IDENTITY的全局变量 ...

  9. ecshop去官方化的修改

    1:如何修改网站"欢迎光临本店" 回答:languages\zh_cn\common.php文件中, $_LANG['welcome'] = '欢迎光临本店';将他修改成你需要的字 ...

  10. ECSHOP模板标签

    模板制作修改经常用到ecshop模板标签: 页面关键字 {$keywords }页面标题 {$page_title}产品分类父分类列表 {foreach from=$categories item=c ...