浏览器支持

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. Docker 初级实践

    Docker 应用 优势 与虚拟相比Docker更加轻量高效,更加方便移植.虚拟机提供的是完整的操作系统环境,包含了大量类似硬件驱动.虚拟处理器.网络接口等等并不需要的信息,也需要比较长时间的启动,同 ...

  2. ButterKnife的使用

    ButterKnife是一个Android View注入的库. 1.开始使用 1.1 配置Eclipse 在使用ButterKnife需要先配置一下Eclipse. 项目右键-Properties-J ...

  3. Android ScrollView

    ScrollView 滚动视图 滚动视图用于为其它组件添加滚动条,在默认的情况下,当窗体中内容比较多,而一屏显示不下时,超出的部分不能被用户所看到.因为Android的布局管理器本身没有提供滚动屏幕的 ...

  4. Robotium--takeScreenshot（截图）

    在Robotium中,截图的方法时调用takeScreenshot(). 但有使用你会发现明明代码里调用了solo.takeScreenshot(),但却没有截图成功,那是因为被测试的应用没有SD卡的 ...

  5. 静态代码检查工具 cppcheck 的使用

      CppCheck是一个C/C++代码缺陷静态检查工具.不同于C/C++编译器及其它分析工具,CppCheck只检查编译器检查不出来的bug,不检查语法错误.所谓静态代码检查就是使用一个工具检查我们 ...

  6. Garbage Collectors - Serial vs. Parallel vs. CMS vs. G1 (and what's new in Java 8)--转

    The 4 Java Garbage Collectors - How the Wrong Choice Dramatically Impacts Performance The year is 20 ...

  7. Ubuntu apt-get 错误 -11 -system error

    错误图片 上述错误是dns解析错误,不能解析域名了,所以也访问不了 解决办法,添加dns,命令如下 sudo vim /etc/resolv.conf 添加 nameserver (此外填写域名服务器 ...

  8. Linux基础知识之 系统启动流程

    [1]Linux启动的几个主要阶段 启动流程示意图

  9. css动画+滚动的+飞舞的小球

    源代码如下: <!DOCTYPE html><html><head> <title>xi</title> <meta charset= ...

  10. 3.RxJava详解

    一.RxJava 到底是什么 异步(取代AsyncTask/Handler/XXX/...?)   二.RxJava 好在哪   简洁(逻辑的简洁,.一步一走)   举例: 题目:将文件夹中的图片都取 ...