参考：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. 【python cookbook】【数据结构与算法】10.从序列中移除重复项且保持元素间顺序不变

    问题:从序列中移除重复的元素,但仍然保持剩下的元素顺序不变 解决方案: 1.如果序列中的值时可哈希(hashable)的,可以通过使用集合和生成器解决.

  2. postgres创建用户，表

    使用createuser来创建用户 [postgres@web1 ~]$ /data/pgsql/bin/createuser --help createuser creates a new Post ...

  3. [转]Rotate a table in reporting services

    转自:http://stackoverflow.com/questions/9002796/rotate-a-table-in-reporting-services 12down voteaccept ...

  4. Positional parameter are considered deprecated; use named parameters or JPA-style positional parameters instead.

    这行代码: List<Cat> catList =session.createQuery("from Cat p where p.name.first_name=?") ...

  5. ffmpeg无法接收组播流问题处理

    问题:ffmpeg无法对IP组播进行处理,表现如下 [root@os01 /]# ffprobe udp://225.0.0.2:9000 ffprobe version Copyright (c) ...

  6. JavaEE基础（十三）

    1.常见对象(StringBuffer类的概述) A:StringBuffer类概述 通过JDK提供的API,查看StringBuffer类的说明 线程安全的可变字符序列 B:StringBuffer ...

  7. Linux用户组与用户组基本命令

    1.添加用户组:groupadd sexy2.修改组名:groupmod -n market sexy3.修改组编号:groupmod -g 668 market4.添加有编号的用户组:group - ...

  8. git 检出

    1 git checkout branch 检出branch分支.要完成图8-1三个步骤,更新HEAD已指向新分支 以及用branch指向的树更新暂存区和工作区 2 git checkout 显示出工 ...

  9. rtc关机闹钟6 AlarmManagerService研究

    这个是 private void setLocked(int type, long when) { if (mNativeData != 0) {            // The kernel n ...

  10. Spark函数

    这张图不错!