参考：http://www.w3school.com.cn/css3/css3_transition.asp

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

过渡属性

下面的表格列出了所有的转换属性：

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

　　实例１

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

实例２

<!DOCTYPE html>

<html>

<head>

<style>

.animated_div

    {

    width:65px;

    height:40px;

    background:#92B901;

    color:#ffffff;

    position:absolute;

    font-weight:bold;

    font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;

    padding:20px 10px 0px 10px;

    float:left;

    margin:5px;

    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

    -webkit-border-radius:5px;

    -o-transition-property:width,height,-o-transform,background,font-size,opacity;

    -o-transition-duration:1s,1s,1s,1s,1s,1s;

    -moz-transition-property:width,height,-o-transform,background,font-size,opacity;

    -moz-transition-duration:1s,1s,1s,1s,1s,1s;

    transition-property:width,height,transform,background,font-size,opacity;

    transition-duration:1s,1s,1s,1s,1s,1s;

    border-radius:5px;

    opacity:0.4;

    }

.animated_div:hover

    {

    -moz-transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

    opacity:1;

    background:#1ec7e6;

    width:90px;

    height:60px;

    font-size:16px;

    }

</style>

</head>

<body>

<div></div>

<p class="animated_div">CSS3 过渡</p>

</body>

</html>

变化前效果：

过程中：

CSS笔记（十三）CSS3之过渡的更多相关文章

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

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

  2. 《C++游戏开发》笔记十三 平滑过渡的战争迷雾(一) 原理：Warcraft3地形拼接算法

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9611887 作者:七十一雾央 新浪微博:http:/ ...

  3. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  4. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  5. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  6. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  7. python3.4学习笔记(十三) 网络爬虫实例代码，使用pyspider抓取多牛投资吧里面的文章信息，抓取政府网新闻内容

    python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...

  8. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  9. java之jvm学习笔记十三(jvm基本结构)

    java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...

  10. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

随机推荐

  1. USB HID描述符【转】

    本文转载自: USB是个通用的总线,端口都是统一的.但是USB设备却各种各样,例如USB鼠标,USB键盘,U盘等等,那么USB主机是如何识别出不同的设备的呢?这就要依赖于描述符了.USB的描述符主要有 ...

  2. 好用的SSH客户端 good SSH client recommended

    对于经常性地要登录服务器的同志们,选择一款优秀的SSH客户端非常有必要,不仅可以提高效率,而且赏心悦目,宅的几率更大.呵呵,我就是i一枚.很出名的就是PuTTY(Windows,Linux都有的), ...

  3. mysql delete数据 空间占用不减少的解决办法

    今天空间商告诉我数据库空间满了,检查了一下,发现网站用户行为记录数据表竟然占了20多MB.积累了半年了,该删除释放一下空间了.果断delete之后发现数据库空间竟然没少,虽然数据记录数是零. 原来这是 ...

  4. 打开开源项目总得.md文件

    google了一些: 78 Tools for Writing and Previewing Markdown  http://mashable.com/2013/06/24/markdown-too ...

  5. mac下多个php版本快速切换的方法是怎么样

    一.使用brew安装php多版本方法# brew install php56# brew install php70二.安装切换工具# brew install php-version# source ...

  6. Nginx使用手册目录

    Nginx学习总结[第一篇]: Nginx简介 Nginx第二篇:Nginx部署及使用 Nginx第三篇:Nginx日志处理 Nginx第四篇:Nginx优化 Nginx第五篇:Nginx日常管理

  7. jdbc连接集合

    JDBC里统一的使用方法:       Class.for(jdbcDriverName);     Connection conn=DriverManager.getConnection(url,u ...

  8. Task schedule 分类： 比赛 HDU 查找 2015-08-08 16:00 2人阅读 评论(0) 收藏

    Task schedule Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. Git合并开发代码分支到测试代码分支

    ——转载请注明出自天外归云的博客园 用TortoiseGit下载代码到本地 首先需要在本机安装好TortoiseGit.然后在随便哪个路径下比如D盘,右键“Git Clone”: 然后URL处选择项目 ...

  10. 华东交通大学2016年ACM“双基”程序设计竞赛 1002

    Problem Description 今天小学弟又训练完了,但是小学弟又不想看球赛,于是小学弟看马赛了.他发现马鞍是一个奇怪的东西.于是小学弟根据马鞍定义了一种马鞍数:在一个二位矩阵中,马鞍数在当前 ...