css属性之transition
浏览器支持
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的更多相关文章
- Transition 所支持的css属性
transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...
- CSS动画之transition属性
transition 属性 简介 transition(过渡)) 是指从一个状态到另一个状态的变化.比如当鼠标在某个元素上悬停时,我们会修改它的样式,采用 transition 可以创建一个平滑的动画 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- 值得注意的CSS属性
文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
随机推荐
- 报错：Failed to create BuildConfig class
1. Project | Clean| Build Automatically 2. 在目录中找到gen目录,手动删除(一般是没有写权限导致Failed),再执行第一步方案.
- C++读写文件并排序
比如一条记录是 1987 9 2 1988 8 26 代表公司员工生日 然后需要读入到系统 现在需要放入容器,并且排序 最后输出到新的文件中,按照年龄由大到小. #include "stda ...
- VS2008LINK : fatal error LNK1000: Internal error during IncrBuildImage
修改链接选项,方法:项目->属性->链接器->常规 下面的“启用增量链接”,将“是(/INCREMENTAL)”改为“否(/INCREMENTAL:NO)”,然后确定就可以了.
- C primer plus 读书笔记第二章
这章的标题是C语言概述,内容大概是介绍一些简单的示例程序,来了解和熟悉C语言的一些基本特征. 这是书里的第一段代码,敲敲找找感觉.推荐在linux环境下写代码. PS:倒腾sublime text一下 ...
- JDK动态代理实现简单AOP--转
JDK 动态代理是 java 反射的一个重要特性.它在某种方面为 java 提供了动态性的特性,给应用带来了无限的空间.大名鼎鼎的 Hessian . Spring AOP 基于动态代理实现.本文将简 ...
- Sandcastle Help File Builder使用教程
Sandcastle Help File Builder相信很多的园友用过,小弟我最近因为工作原因需要生成公司的一套SDK的帮助文档,因此找了一些资料,发现网上的资料很多,但是都不怎么完全,有些只是随 ...
- 海尔的U+智慧生活操作系统
通过一个手机APP就能操控家庭内的不同品牌的家电家居设备.在连接Wifi的状态下,海尔智能路由器能够自动连接上家庭里的智能冰箱.智能洗衣机.智能空调.智能烤箱.空气盒子等设备端.在智能手机上下载海尔U ...
- Rolling cURL: PHP并发最佳实践
Rolling cURL: PHP并发最佳实践 在实际项目或者自己编写小工具(比如新闻聚合,商品价格监控,比价)的过程中, 通常需要从第3方网站或者API接口获取数据, 在需要处理1个URL队列时, ...
- iOS中使用图片作为颜色的背景图
Objective-C: [UIColor colorWithPatternImage:[UIImage imageNamed:@"jpg"]]; Swift: UIColor(p ...
- DWZ简介及其使用
来源:http://blog.csdn.net/t123012009065/article/details/8286826 DWZ简介: DWZ富客户端框架(jQuery RIA framewor ...