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 ...
随机推荐
- Windows 10 TH2
Windows 10 TH2到底更新了啥? 15年11月,微软正式向Windows 10用户推送了Threshold 2(简称TH2)更新, 也就是传说中的November Update.更新后系统版 ...
- 机器学习笔记——K-means
K-means是一种聚类算法,其要求用户设定聚类个数k作为输入參数,因此,在执行此算法前,须要预计须要的簇的个数. 如果有n个点,须要聚到k个簇中.K-means算法首先从包括k个中心点的初始集合開始 ...
- 将Apache添加为Linux的服务 实现自启动(转)
在Linux下用源代码方式编译安装完Apache后,启动关闭Apache可以通过如下命令实现: /app/apache2.2.14/bin/apachectl start | stop | resta ...
- cocos2d-x 3.6版连连看载入资源
网上找了一个梦幻连连看的资源.大家能够百度一下.然后整理一下加到project里面去.包含声音和图片文件.后面解释怎样整理能够方便管理. 我不推荐在代码里面直接引用资源文件名称,我称之为硬编码. 做i ...
- mysql中如何更新一个字段的值为它本身的值连接上一个字符串
CONCAT(str1,str2,...) 返回结果为连接参数产生的字符串. 如有任何一个参数为NULL ,则返回值为 NULL. 或许有一个或多个参数. 如果所有参数均为非二进制字符串,则结 ...
- machine learning in action , part 1
We should think in below four questions: the decription of machine learning key tasks in machine lea ...
- maven第三章 maven使用入门
3.1编写pom groupId 一个项目名称 artifactId 子项目(模块)名称 version 开发中的版本,稳定的版本 name 项目名称,方便信息交流 http://news.cnblo ...
- sublime开启php自动代码补全
配置文件添加 "auto_complete_selector": "source, text", 配置文件打开方式:preferences->settin ...
- iOS 天气应用代码中文介绍
天气应用 解释请求参数 q: 表示Location(可以给出城市名字;或者直接给城市的经纬度) 例子:q=beijing 例子 q=48.834,2.394 num_of_days: 需要预报的天数 ...
- 将图片转换为Base64
string Imagefilename 硬盘路径 protected string ImgToBase64String(string Imagefilename) { try { Bitmap ...