浏览器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property

transition-duration

transition-timing-function

transition-delay

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:blue;

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>

div

{

width:100px;

height:100px;

background:blue;

transition-property:width;

transition-duration:5s;

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:5s;

/* Safari and Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:5s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:5s;

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

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

</body>

</html>

css属性之transition的更多相关文章

  1. Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...

  2. CSS动画之transition属性

    transition 属性 简介 transition(过渡)) 是指从一个状态到另一个状态的变化.比如当鼠标在某个元素上悬停时,我们会修改它的样式,采用 transition 可以创建一个平滑的动画 ...

  3. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  4. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  5. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  6. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  7. css 动画 transform transition animation

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

  8. 值得注意的CSS属性

    文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...

  9. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

随机推荐

  1. POJ1505:Copying Books(区间DP)

    Description Before the invention of book-printing, it was very hard to make a copy of a book. All th ...

  2. intent的startActivityForResult()方法

      /******************************************************************************************** * au ...

  3. Unix C++（boost） 线程同步和线程组

    #include <boost/thread.hpp> #include <iostream> #include <vector> #include <cst ...

  4. 读书笔记--用Python写网络爬虫01--网络爬虫简介

    Wiki - Web crawler 百度百科 - 网络爬虫 1.1 网络爬虫何时使用 用于快速自动地获取网络信息,避免重复性的手工操作. 1.2 网络爬虫是否合法 网络爬虫目前人处于早期的蛮荒阶段, ...

  5. 小学生之使用Mybatis反向生成dao,entity,xml

    本小学生刚进公司的时候,就一顿装逼,不管别人问我啥我都会说:"会"!毕竟在公司吗,什么都要装,不要别人看出你的底细.不过有一天,听说用Mybatis可以反向生成dao(第一次听说) ...

  6. shell 数组（in_array）

    if [[ ! "${array[@]}" =~ $val ]] ; then fi

  7. 杀掉linux所有进程的命令

    ps -ef|grep 'opt/*/tomcat_ssi'|grep -v "grep"|awk '{print $2}'|xargs kill -9

  8. ReportViewer2010冻结行列

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewTrackingVer ...

  9. adb服务启动失败处理命令

    执行以下命令: D:\android-sdks\platform-tools>adb kill-server --停止adb服务 D:\android-sdks\platform-tools&g ...

  10. [php基础]PHP.INI配置:Session配置详细说明教程

    网上有很多PHP.INI文件配置的中文说明,但是对于PHP初学者来说在进行PHP运行环境搭建配置时还是容易一头雾水,今天换一种角度来分享如何进行php.ini配置,以求达到解决实际问题的效果,开篇以P ...