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 ...
随机推荐
- jquery width(), innerWidth(), outerWidth() 区别
#div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...
- 查询表达式Linq
LINQ简介 OO(面向对象)以外的疆域:信息的访问与整合.关系数据库与XML为其中的典型应用. .net Language Integrated Query(Linq):不采用特定关于数据库与XML ...
- AndroidStudio文件夹结构视图讲解
近期,Google已经打算废弃Eclipse.而要大力支持他的亲生儿子AndroidStudio了,已经不在维护Eclipse了,也就是说在Eclipse上面出了什么问题.Google已经不在会管了, ...
- Linux/UNIX套接字连接
套接字连接 套接字是一种通信机子.凭借这样的机制.客户/server系统的开发工作既能够在本地单机上进行.也能够夸网络进行. 套接字的创建和使用与管道是有差别的.由于套接字明白地将客户和server区 ...
- Android系统更改状态栏字体颜色
随着时代的发展,Android的状态栏都不是乌黑一片了,在Android4.4之后我们可以修改状态栏的颜色或者让我们自己的View延伸到状态栏下面.我们可以进行更多的定制化了,然而有的时候我们使用的是 ...
- 利用PCA来简化数据
13.2.2 在NUmpy中实现PCA 将数据转换成前N个主成分的伪代码大致如下: 去除平均值 计算协方差矩阵 计算协方差矩阵的特征值和特征向量 将特征值从大到小排列 保留最上面的N个特征向量 将数据 ...
- python集合set,frozenset--笔记
<Python3程序开发指南>笔记. python提供了2种内置的集合类型:可变的set类型.固定的frozenset类型. 只有可哈希运算的对象可添加到集合中.可哈希的数据类型:floa ...
- 对static静态成员的理解
疑惑: 数据成员可以分静态变量.非静态变量两种. 静态成员:静态类中的成员加入static修饰符,即是静态成员.可以直接使用类名+静态成员名访问此静态成员,因为静态成员存在于内存,非静态成员需要实例 ...
- NPOI控件的使用导出excel文件和word文件
public HttpResponseMessage GetReportRateOutput(DateTime? begin_time = null, DateTime? end_time = nul ...
- python 下的数据结构与算法---8：哈希一下【dict与set的实现】
少年,不知道你好记不记得第三篇文章讲python内建数据结构的方法及其时间复杂度时里面关于dict与set的时间复杂度[为何访问元素为O(1)]原理我说后面讲吗?其实就是这篇文章讲啦. 目录: 一:H ...