CSS3 过渡

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡属性

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

下面的例子设置所有过渡属性:

实例

在一个例子中使用所有过渡属性:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

  

简写的 transition 实例

实例

与上面的例子相同的过渡效果,但是使用了简写的 transition 属性:

div
{
transition: width 1s linear 2s;/* Firefox 4 */
-moz-transition:width 1s linear 2s;/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;/* Opera */
-o-transition:width 1s linear 2s; }

  

css3学习总结9--CSS3过渡的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  4. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  5. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  6. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  7. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  8. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  9. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  10. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

随机推荐

  1. IIS FTP Server Anonymous Writeable Reinforcement, WEBDAV Anonymous Writeable Reinforcement(undone)

    目录 . 引言 . IIS 6.0 FTP匿名登录.匿名可写加固 . IIS 7.0 FTP匿名登录.匿名可写加固 . IIS >= 7.5 FTP匿名登录.匿名可写加固 . IIS 6.0 A ...

  2. TCP/IP详解 学习二

    链路层: 在 T C P / I P协议族中,链路层主要有三个目的:(1)为 I P模块发送和接收 I P数据报:( 2)为 A R P模块发送 A R P请求和接收 A R P应答:( 3)为 R ...

  3. 《驾驭Core Data》 第三章 数据建模

    本文由海水的味道编译整理,请勿转载,请勿用于商业用途.    当前版本号:0.1.2 第三章数据建模 Core Data栈配置好之后,接下来的工作就是设计对象图,在Core Data框架中,对象图被表 ...

  4. easyUI框架之学习1--框架

    <!DOCTYPE html><html> <head > <link href="~/Scripts/easyUI/themes/default/ ...

  5. Laravel教程 一:安装及环境配置

    Laravel教程 一:安装及环境配置 此文章为原创文章,未经同意,禁止转载. Homestead 最近在SF上面看到越来越多的Laravel相关的问题,而作为一个Laravel的脑残粉,本来打算有机 ...

  6. SQL 基本语句

    1.修改sa账户密码 在查询分析器中执行如下语句: sp_password Null,'teracypwd','sa' 把SA的密码设为"teracypwd" 执行成功后有&quo ...

  7. 统一软件开发过程(rup)理解

    不好意思,没有内容,请看百科吧http://baike.baidu.com/link?url=-zXA6oXiHRts5Z1THGzie7seH-YRigfiR7KRppP6TYcnnb7_Bxc_f ...

  8. java随机生成简体中文取指定长度随机简体中文实用方法

    /**     * 获取指定长度随机简体中文     * @param len int     * @return String     */    public static String getR ...

  9. vssver2.scc 文件是干啥的?

    idcdpi源文件下的tools下有一个文件    vssver2.scc     vssver2.scc是什么文件 首先,先来个名词解释:Microsoft Visual Source Safe是美 ...

  10. JQuery元素获取

    前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...