CSS3 基础（006_过渡）

最新推荐文章于 2024-10-16 23:00:23 发布
最新推荐文章于 2024-10-16 23:00:23 发布
阅读量470 收藏
点赞数
分类专栏： CSS 文章标签： css3

原始网址：http://www.w3schools.com/css/css3_transitions.asp

翻译：

CSS3 过渡（CSS3 Transitions）

CSS3 过渡

CSS3 过渡允许你在给定的持续时间之内以平缓地改变属性值（从一个值改变为另一个值）。

示例：鼠标指针悬停于下列元素之上以观察 CSS3 的过渡效果
CSS3 过渡

<!DOCTYPE html>
<html>
<head>
<style>
.animated_div {
    background: #92b901 none repeat scroll 0 0;
    border-radius: 5px;
    color: #ffffff;
    float: left;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    margin: 5px;
    opacity: 0.4;
    padding: 10px;
    position: absolute;
    transition: width 1s ease 0s, height 1s ease 0s, transform 1s ease 0s, background 1s ease 0s, font-size 1s ease 0s, opacity 1s ease 0s;
    width: 65px;
}

.animated_div:hover {
    background: #1ec7e6 none repeat scroll 0 0;
    font-size: 35px;
    height: 80px;
    opacity: 1;
    width: 130px;
}
</style>
</head>
<body>
    <div style="height: 90px;"><div class="animated_div">CSS3</div></div>
</body>
</html>

Browser Support for Transitions

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit-、-moz- 或 -o- 指定带前缀工作的第一个版本号。

属性（Property）chromeIEfirefoxsafariopera
transition26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-delay26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-duration26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-property26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-timing-function26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-

如何使用 CSS3 过渡？

要创建过渡效果，你必须满足 2 个条件：

  • 你想添加效果的 CSS 属性

  • 效果的持续时间

    注意：如果持续时间部分没有被指定，将不会产生过渡效果，因为该默认值为 0 。

下列示例将呈现 100px * 100px 的红色 <div> 元素。该 <div> 元素还对宽度指定了过渡效果，持续时间为 2 秒：

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

当被指定的 CSS 属性（宽）变更值的时候，过渡效果开始发生。
现在，当用户鼠标指针悬停于 <div> 元素之上的时候，让我们给予宽度属性一个新值：

div:hover {
    width: 300px;
}

CSS3 过渡

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

注意：当光标移出元素的时候，它将逐渐变回到原样式。

改变多个属性值

下列示例对宽、高属性均添加过渡效果，对宽度的持续时间为 2 秒，对高度的持续时间为 4 秒：

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

改变多个属性值

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
}

div:hover {
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

指定过渡的速度曲线

transition-timing-function 属性指定过渡效果的速度曲线。
transition-timing-function 可以有以下取值：

  • ease - 指定过渡效果为慢、快、慢的节奏（默认值）
  • linear - 指定过渡效果为匀速
  • ease-in - 指定过渡效果为慢开始
  • ease-out - 指定过渡效果为慢结束
  • ease-in-out - 指定过渡效果为慢开始、慢结束
  • cubic-bezier(n,n,n,n) - 自定义贝塞尔曲线函数值

下列示例展示了可被使用的不同速度曲线：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

指定过渡的速度曲线

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

/* For Safari 3.1 to 6.0 */
#div1 {
    -webkit-transition-timing-function: linear;
}

#div2 {
    -webkit-transition-timing-function: ease;
}

#div3 {
    -webkit-transition-timing-function: ease-in;
}

#div4 {
    -webkit-transition-timing-function: ease-out;
}

#div5 {
    -webkit-transition-timing-function: ease-in-out;
}

/* Standard syntax */
#div1 {
    transition-timing-function: linear;
}

#div2 {
    transition-timing-function: ease;
}

#div3 {
    transition-timing-function: ease-in;
}

#div4 {
    transition-timing-function: ease-out;
}

#div5 {
    transition-timing-function: ease-in-out;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div id="div1">linear</div>
    <br>
    <div id="div2">ease</div>
    <br>
    <div id="div3">ease-in</div>
    <br>
    <div id="div4">ease-out</div>
    <br>
    <div id="div5">ease-in-out</div>
    <br>
    <p>Hover over the div elements above, to see the different speed curves.</p>
</body>
</html>

延迟过渡效果（Delay the Transition Effect）

transition-delay 属性指定过渡效果的延迟。
下列示例在开始之前有 1 秒延迟：

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

延迟过渡效果

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 3s; /* Safari */
    -webkit-transition-delay: 1s; /* Safari */
    transition: width 3s;
    transition-delay: 1s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
    <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>

过渡 + 变换（Transition + Transformation）

下列示例给过渡效果增加变换：

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

过渡 + 变换

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

更多过渡示例（More Transition Examples）

CSS3 过渡属性可以被单个指定，如下：

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;
    /* Standard syntax */
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p>Hover over the div element above, to see the transition effects.</p>
    <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>

或使用简写属性 transition：

div {
    transition: width 2s linear 1s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */
    transition: width 2s linear 1s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
    <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
</html>
柯南道尔2606
关注
专栏目录
css3文字特效_css3火焰文字_css3文字渐变代码
11-23
一、CSS3文字特效基础 CSS3文字特效主要依赖于其新增的属性和功能，如文本阴影(text-shadow)、文本描边(text-stroke)、渐变(gradient)、变换(transform)等。通过这些特性，我们可以创造出丰富多彩的文字展示效果，...
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
6. **CSS3过渡与动画**：通过transition和animation属性可以实现元素状态间的平滑过渡和自定义动画，增强用户体验。 7. **响应式设计**：利用媒体查询（media queries）适应不同设备的屏幕尺寸，实现网页的跨设备...
transition将鼠标悬停在一个div元素上，逐步改变表格的宽度从100px到300px：:
只作为个人备忘录
12-03 2056
div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; } 注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。 鼠标移动到 div 元素上，查看过渡效果。
css-动画-transition-过渡动画
pyhui的技术博客
06-13 1364
transition 用法 对于一个属性的简写 transition: 属性 持续时间 速度 延迟 对于多个属性的简写 transition: 属性1 持续时间1 速度1 延迟1， 属性2 持续时间2 速度2 延迟2； 对于全属性的变化（待核实） transition:all 持续时间 速度 延迟 读音的拆分 tran si tion 意义 transition动画的属性 prope...
CSS3 过渡
山水子农
08-17 722
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。1、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果要实现这一点，必须规定两项内容：    指定要添加效果的CSS属性    指定效果的持续时间实例：应用于宽度属性的过渡效果，时长为 2 秒：div{ transition: width 2s; -webkit-trans...
css3_实现动画设置其过渡过程中的效果_transition
司空的博客
04-08 674
规定div区域 当鼠标放上去后由宽度100px变为200px div{width:100px;} div:hover{width:200px;}设置宽度100px到200px变化过程的过渡效果【设置width变化的过渡效果，过渡时间为2s，以相同速度运行（linear），延迟1s开始】 div{width:100px; transition:width 2s linear 1s; -moz-t
使用CSS3的“transition ”属性控制长宽度的缓慢变化
热门推荐
干勾鱼的CSDN博客
11-28 2万+
有时候我们可能会想要改变某个资源信息的长宽度，比如改变某个div的宽度，而且需要让这个宽度缓慢改变，而不是突然就改变了。这时候你可能会想到使用jquery的animate()函数，不过这个方法既得引用jquery，又得使用函数，有点太简单粗暴了，今天介绍一种更为方便而且优雅的方法，那就是使用CSS3的“transition”属性。 在w3school上对“transition”属性有详细的解释，
css过渡 取消过渡_CSS基础知识：CSS3过渡
Web design 教程小屋
07-07 1624
随着CSS3在网络上的推广，它带来了一些有趣的新演示技术。 今天，我们将回顾使用CSS3过渡和动画的基础知识，以增加额外的修饰。 本教程包括Tuts + Premium成员可用的截屏视频。 步骤1 –链接转换 首先，我们将使用一些基本技术-首先，当用户将鼠标悬停在指定元素上时，只需简单更改文本颜色即可。 a { color:#000; } a:hover { color:#f00;...
HTML5 + CSS3 基础知识梳理
weixin_57334661的博客
05-05 1329
视频播放器需要的属性controls显示或隐藏用户控制界面autoplay媒体是否自动播放loop媒体是否循环播放pause媒体是否暂停（只读属性）ended媒体是否播放完毕（只读属性）当前的播放进度duration媒体播放总时间volume0.0到1.0的音量相对值muted是否静音3.2播放器需要的方法：视频播放器用到的方法play()媒体播放Pause()媒体暂停时间更新Canplay()可以播放。
css3.0.rar_CSS3_css3.0_html chm
09-23
CSS3（Cascading Style Sheets Level 3）是Web样式表语言的最新版本，它在CSS2.1的基础上增加了许多新的功能和特性，为网页设计带来了更大的灵活性和控制力。本资源包含了一份中文版的CSS3.0学习资料——"css3.0.chm...
MZnauka-css3_reason71s_css3english_css_zip_
10-02
【标题】"MZnauka-css3_reason71s_css3english_css_zip_" 指的是一个关于CSS3学习资源的压缩包，其中包含了“reason71s”、“css3english”以及“css”等关键词，暗示这可能是一个关于CSS3技术、教程或者示例的集合...
css.rar_css_css a_css api_cssapi
09-22
1. **CSS基础知识**：CSS的基本语法包括选择器、属性和值。选择器定位到HTML中的特定元素，属性定义了元素的样式属性，而值则指定了该属性应如何呈现。例如，`color:red;`将文本颜色设置为红色。 2. **CSS a 标签**...
收录 CSS 基础面试题（附答案）
简约靳
04-27 321
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin2、box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准...
现今 CSS3 最强二维布局系统 Grid 网格布局
qq_73220073的博客
10-13 1175
Grid 布局是一个基于网格的二位布局系统，是目前 CSS 最强的布局系统，它可以同时对列和行进行处理（它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局） CSS3 最强布局系统 Grid 布局 二维布局系统
css3新增都知识点
2301_80365562的博客
10-16 277
属性选择器、伪类选择器、伪元素选择器。
上市公司财务指标现金流分析1991-202406的网盘链接.docx
10-20
Stkcd [股票代码] ShortName [股票简称] Accper [统计截止日期] Typrep [报表类型编码] Indcd [行业代码] Indnme [行业名称] Source [公告来源] F060101B [净利润现金净含量] F060101C [净利润现金净含量TTM] F060201B [营业收入现金含量] F060201C [营业收入现金含量TTM] F060301B [营业收入现金净含量] F060301C [营业收入现金净含量TTM] F060401B [营业利润现金净含量] F060401C [营业利润现金净含量TTM] F060901B [筹资活动债权人现金净流量] F060901C [筹资活动债权人现金净流量TTM] F061001B [筹资活动股东现金净流量] F061001C [筹资活动股东现金净流量TTM] F061201B [折旧摊销] F061201C [折旧摊销TTM] F061301B [公司现金流1] F061302B [公司现金流2] F061301C [公司现金流TTM1] F061302C [公司现金流TTM2] F061401B [股权现金流1] F061402B [股权现金流2] F061401C [股权现金流TTM1] F061402C [股权现金流TTM2] F061501B [公司自由现金流(原有)] F061601B [股权自由现金流(原有)] F061701B [全部现金回收率] F061801B [营运指数] F061901B [资本支出与折旧摊销比] F062001B [现金适合比率] F062101B [现金再投资比率] F062201B [现金满足投资比率] F062301B [股权自由现金流] F062401B [企业自由现金流] Indcd1 [行业代码1] Indnme1 [行业名称1] 季度数据，所有沪深北上市公司的 分别包含excel、dta数据文件格式及其说明，便于不同软件工具对数据的分析应用 数据来源：基于上市公司年报及公告数据整理，或相关证券交易所、各部委、省、市数据 数据范围：基于沪深北证上市公司 A股（主板、中小企业板、创业板、科创板等）数据整理计算
Jetpack编写桌面数据包捕获. Support Ethernet,ARP,ICMP,TCP,UDP packet（协议抓
10-20
Jetpack编写桌面数据包捕获. Support Ethernet,ARP,ICMP,TCP,UDP packet（协议抓包软件）_ComposeCap
JSP041航空订票系统毕业课程源码设计+论文资料+答辩ppt
10-20
编号：346 程序测试软件：Eclipse/Idea 数据库：Sqlserver2008以上版本 系统信息实体： （1）航班信息(航班编号，航班班次，价格，路线，总票数，起飞时间，上传图片，备注） （2）用户信息(用户编号，用户名称，密码，用户类型，地址，单位，注册时间，图片，备注，性别） （3）网站发布信息(信息编号，标题，内容，上传时间，上传人，备注） （4）票务信息(订票编号，订票人编号，航空班次，注册时间，票价，内容，是否通过验证，备注，订票人年龄，订票人住址，订票方式，订票时间）
Apache Apex 是一个用于大数据流和批处理的统一平台 使用案例包括摄取、ETL、实时分析、警报和实时操作
最新发布
10-20
Apache Apex 是一个用于大数据流和批处理的统一平台。使用案例包括摄取、ETL、实时分析、警报和实时操作。Apex 是 Hadoop 原生 YARN 实现，默认使用 HDFS。它通过缩短上市时间来简化 Hadoop 应用程序的开发和产品化。主要功能包括企业级可操作性与容错能力、状态管理、事件处理保证、无数据丢失、内存性能和可扩展性以及原生窗口支持。
理解CSS3过渡与动画：从基础到实践
"这篇文档是关于CSS3中的过渡和动画的简单总结，涵盖了过渡的基本概念、CSS3动画的创建步骤以及动画属性的介绍。" 在Web开发中，CSS3引入了过渡（Transition）和动画（Animation）这两个强大的特性，极大地提升了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值