DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
transition
属性是一个简写属性,用于表示最多四个与过渡相关的完整属性。
.element {
transition: background-color 0.5s ease;
}
语法
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
演示
transition
属性允许元素在指定持续时间内更改值,从而为属性更改创建动画效果,而不是立即发生更改。因此,如果我们有一个背景为红色的盒子,当鼠标悬停在其上时,我们希望将其背景更改为绿色,我们可以直接使用 transition
属性在背景颜色之间进行过渡。
指定要过渡的属性
请注意,我们在 transition
声明中指明了 background-color
属性。这告诉浏览器,当在悬停和非悬停状态之间发生过渡时,我们计划过渡背景颜色,而不是其他任何属性。另外,我们也告诉浏览器,过渡应该持续两秒钟,并遵循 ease-out
时间函数,这意味着过渡开始时速度很快,然后逐渐减慢到结束。
您可以像上面那样指定特定属性,或者使用 all
值来引用过渡属性。
.element {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
.element:hover {
background: green;
padding: 20px;
}
all
指定为简写中的 transition-property
部分。您也可以使用逗号分隔值集,以便对不同的属性进行不同的过渡。
.element {
transition: background 0.2s ease,
padding 0.8s linear;
}
在大多数情况下,值的顺序无关紧要——除非指定了延迟。如果您指定了延迟,则必须首先指定持续时间。浏览器识别为有效时间值的第一个值始终代表持续时间。任何后续的有效时间值都将被解析为延迟。
某些属性无法进行过渡,因为它们不是可动画属性。请参阅规范以获取 哪些属性是可动画的的完整列表。
通过在元素本身指定过渡,您可以定义过渡在两个方向上都发生。也就是说,当样式更改时(例如,鼠标悬停时),属性将过渡,当样式恢复时(例如,鼠标移开时),它们也将过渡。例如,下面的演示在鼠标悬停时过渡,但在鼠标移开时不过渡。
浏览器支持
这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 5* | 10 | 12 | 5.1* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1* | 6.0-6.1* |
transition
的 CSS 技巧
使用 鼠标悬停时为文本链接颜色设置动画的 4 种方法
CSS 链接悬停效果的 6 个创意
Adam Argyle 的鼠标移出 CSS 悬停效果
关于 CSS 过渡你需要知道的一切
动画媒体查询
边框动画
使用自定义属性和 cubic-bezier() 构建复杂的 CSS 过渡
使用 JavaScript 控制 CSS 动画和过渡
使用背景属性的酷炫悬停效果
使用 CSS 文本阴影的酷炫悬停效果
电子邮件中的 CSS 动画和过渡
CSS Grid 可以实现自动高度过渡
CSS 过渡时序
悬停时和移开时不同的过渡
如何使用 CSS 过渡创建逼真的运动模糊
使用“无限”过渡延迟维护 CSS 样式状态
动画到块级背景的链接下划线
使用鼠标位置移动背景
重新创建 Netlify 的简洁滑动按钮效果
共享元素过渡
交错的 CSS 过渡
过渡延迟延迟
使用 CSS 过渡和动画改变渐变的状态
渐变过渡
CSS 生成的内容上的过渡和动画
在自动尺寸上使用 CSS 过渡
使用多步骤动画和过渡
可以对 z-index 进行过渡
更多信息
- CSS 过渡规范 (W3C)
- CSS 过渡简写属性 (DigitalOcean)
- CSS 过渡交互式指南 (Josh Comeau)
- CSS
will-change
属性:何时使用以及何时不使用 (DigitalOcean)
http://www.css3.info/preview/css3-transitions/
感谢 Chris 提供的所有好东西……我经常回到这个网站寻找许多很棒的技巧和,“窍门”。
确实很技巧 :) 谢谢!
感谢 Chris 的分享。您指向 Adobe 的综合指南的链接尝试转到您网站的子目录。可能需要修复它。
大家好。当使用 div 图像背景时,这在我的 Firefox 中不起作用。但在 Webkit 浏览器上运行良好。有什么想法吗?
HJ,你的CSS中是否包含“-moz-transition:”?只是确认一下……以及Firefox的哪个版本?什么操作系统?
嗨,HJ,是的,我确实有-moz-transition。我正在运行Firfox 23.0.1和Mac OS X Mavericks。
我可以确认这一点。出于某种原因,OS X中的Firefox会在悬停和移出状态下同时应用两种过渡,即使悬停状态下没有过渡信息。
大家好,
更改CSS3背景渐变和背景图像时,此方法不起作用。我该如何解决?请帮帮我。
这是我使用的代码。
看起来您使用了两个单独的元素——第一行针对LI,第二行针对A:HOVER
试试这个
虽然我不确定如何处理非重复和重复背景之间的更改。
“background-image 3s ease;”
是的,线性渐变对我也不起作用
我发现本教程很有用,并在自己的网站中使用了一些技巧。谢谢。
感谢Chris的所有
帮助。;->
这是一篇非常好的文章,适合新手
我在我的应用程序中使用了它
http://oldc.in
嗨,我遇到一个问题!css有效,但与我看到的示例不同,我的css在页面加载时会自动播放
这里的问题是,当页面加载时,它会从没有阴影到有阴影进行动画,然后在悬停时执行它需要做的操作(黑色到蓝色阴影)。有没有办法禁用第一个动画?
box
box:hover
我认为你需要“ -in”或“-out”部分的缓动,是吗?
不,“ease”、“ease-in”、“ease-out”和“ease-in-out”是四个不同的属性,它们不能是“box-shadow”的属性。
哦,我的意思是它只会转到“transition”属性。而不是“box-shadow”。所以你不想在页面加载时出现效果,然后从#box到#box:hover移除“transition”。除非我遗漏了什么。
您是否有指向我们可以查看的页面的链接?
好的,我明白了,<form>中的一些元素存在冲突,例如input type="email",导致它渲染不正确。我不知道为什么,可能是HTML5的bug。
哦,好的,现在工作正常了。因为我删除了“border-image”属性O.O。我不知道为什么XD。
哦,等等,不是那个属性。原来的仍然无法正常工作,但我制作了css和索引文件的另一个副本,其中我只在css中包含了该div元素及其格式,并且它工作正常。所以它一定与其他元素冲突,所以我想我得不到更多帮助了:/。
大家好。我的过渡在IE和Chrome中工作正常,但在FF中不工作。我正在运行28.0,操作系统为Mavericks。
我从https://css-tricks.org.cn/downloads/css-stuff/借用了这段代码,但我无法在FF中使其工作。IE和Chrome都很好。
我正处于学习阶段。
感谢您的帮助。
#banner {
width: 600px;
height: 200px;
margin: 0px 10px 30px 50px;
border: 8px solid #eee;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
border-radius:5px;
}
#banner div {
position: absolute;
}
#banner div:nth-child(2) {
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1000px -1000px;
}
}
#rollover {
width: 250px;
height: 250px;
position: relative;
border: 8px solid #eee;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#rollover div {
position: absolute;
top: 0;
left: 0;
}
#rollover div:nth-child(2) {
}
#rollover div:nth-child(2):hover {
-webkit-mask-position: -300px -300px;
}
为所有CSS3代码添加前缀-moz-,并将其作为-webkit-添加另一组
例如:-
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1000px -1000px;
}
}
/*适用于Firefox*/
@-moz-keyframes wipe {
0% {
-moz-mask-position: 0 0;
}
100% {
-moz-mask-position: -1000px -1000px;
}
}
您好,
您能否告诉我如何在JavaScript代码中将
rotateX
更改为简单的滑动效果。感谢您的帮助。
谢谢
谢谢,我爱CSS3,我喜欢这个教程(y)
所以,我还没有看到任何地方真正记录过这一点……但在我看来非常有用..
正如许多其他人所同意的,将过渡限制为通过悬停触发,可能会非常痛苦,并且有时会使这个很棒的功能几乎毫无用处!(然后在不应该使用JavaScript的情况下强制使用JavaScript)..
但是,我刚刚通过使用STYLE元素的“MEDIA”属性结合CSS3的过渡效果进行试验发现,我们非常能够通过其他事件列表触发过渡,而无需在窗口大小调整等情况下使用任何JavaScript/jQuery来进行动画/淡入淡出/元素移动!
(例如:[STYLE MEDIA="all and (min-width: 600px)" ])
这实际上给我们带来了很多新的选项,比如屏幕方向:横向/纵向;对移动设备很有用等等!— 在w3schools上找到完整列表!
我个人觉得这非常棒……想分享一下。
我确定Chris已经知道了……(哈哈)— 他总是能够在窗口缩小等操作时让一切重新排列得很好……(虽然我从来没有真正查看过css-tricks.com的代码来确定这是否确实是他的方法;但它绝对看起来像是,因为过渡也同样流畅等等……但是,我必须说,现在我刚刚检查了一下,旧的css-tricks设计比现在更能体现这一点)。
享受 :)
sdfsaf
我们可以在页面加载时更改文字颜色,而无需鼠标悬停。就像gif动画一样吗?
是的,你可以使用@keyframes规则。请阅读https://w3schools.org.cn/css/css3_animations.asp并练习示例。
我仍然对以下内容感到困惑
-webkit-transition-timing-function
的值……
不错的文章。请写一篇关于使用svg进行过渡的文章。你可以查看这个3D打印机网站的缩略图。
css
.my-gallery .my-icon-gallery
{
position: absolute;
z-index: 10000;
top: 50%;
left: 50%;
right: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
display: inline-block;
fill: rgba(255, 255, 255, 0);
stroke: rgba(255, 255, 255, 1);
stroke-width: .05em;
stroke-opacity: 1;
stroke-linecap: butt;
stroke-linejoin: bevel;
stroke-dasharray: 0, 150;
-webkit-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
-moz-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
-ms-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
-o-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
}
js: (文档就绪时)
var url =’/css/simpleline-icons.svg’;
var c=new XMLHttpRequest(); c.open(‘GET’, url, false); c.setRequestHeader(‘Content-Type’, ‘text/xml’); c.send();
document.body.insertBefore(c.responseXML.firstChild, document.body.firstChild)
.my-gallery:hover > .my-icon-gallery
{
fill: rgba(255, 255, 255, 1);
stroke-dasharray: 150, 1;
stroke-opacity: 0;
}
.my-icon-gallery:after
{
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html
看起来不错 :)
如此简单的事情,却能极大地改变网站的体验。
对于那些希望他们的过渡从红色到绿色再到橙色的人,只需使用
HSL
(色相、饱和度、亮度)设置background-color
。例如:http://codepen.io/anon/pen/xbzGeo感谢你的时间
要为悬停和取消悬停添加单独的过渡,请在元素样式中包含-off过渡,在:hover样式中包含-on过渡。我将上面的CodePen分叉为一个示例。
我有一个疑问。我可以在悬停我的图片div时添加一个覆盖文本吗?
请帮助我。
是的,你可以做到。
CSS
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
HTML
文本
我目前在过渡方面遇到了问题。我不确定我是否使用了太多过渡,或者是否遗漏了什么。悬停CSS和过渡内容如下。我试图让一张图片在悬停时向左移动。
#hoverpage {
width: 500px;
height: 334px;
position: relative;
overflow-x: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.insidehover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
width: 500px;
height: 334px;
}
#hoverpage:hover .insidehover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
left: -500px;
}
说真的,非常感谢。我到处都在寻找如何使用缓动过渡返回到链接的正常状态。
非常感谢,这很有帮助
谢谢。真的很需要
我该如何缩放图像?我使用哪个过渡?
我真的很喜欢css-tricks.com <3
像往常一样,这是一个不错的教程,但我想让你知道红/绿过渡不是最佳的颜色选择。如你所知,红/绿颜色盲症相当普遍,我个人根本看不到任何颜色变化。
如果这个过渡效果在iOS上不起作用,那有什么意义呢?
这个教程实际上比w3schools和其他我访问过的理解这个概念的大多数教程都更好地解释了过渡。
很棒的文章!
我尝试动画“background-color”时遇到了困难。
到这里之后,我将其更改为“background”,它就起作用了!!
body {
font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
font-size: 18px;
/* line-height:22px;*/
}
div {
display:block;
}
h2 {
color:blue;
text-align:center;
}
header img {
float: left;
clear:right;
margin-bottom:.5%;
margin-left:20px;
margin-top:18px;
margin-right:20px;
}
header h4 {
font-size:30px;
float:right;
clear:left;
font-family:verdana;
color:blue;
clear:right;
margin-top:8px;
margin-right:2%;
}
header ul {
float:right;
clear:left;
list-style-type:none;
padding:0;
margin:0;
margin-top:-3%;
margin-right:2%;
}
header ul li a {
display: block;
padding: 0;
}
header ul li {
float:left;
border: 2px solid #ffffff;
border-radius:.4em;
margin: .5em;
}
#section {
margin-left:10%;
margin-top:2%;
text-align:center;
}
#main {
margin-left:3%;
float:left;
clear:right;
width:20%;
text-align:center;
}
在这个过渡结束后,它会跳回,我能否使其缓慢结束???
大家好。有人知道过渡的默认时间是多少吗?
或者悬停响应的默认时间?因为我页面上的一个元素在快速移动鼠标时不会响应。问题是鼠标应该悬停多久才能触发onhover?
你好。
我想知道是否有办法只使用一个方向,例如,只向上,这样底部保持静止,而过渡发生在元素的顶部。
.finger3:hover {
height: 200px;
transition: 1s ease-in-out;
}
}
是否需要前缀 -webkit、-moz、-o?
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
可动画属性列表
https://mdn.org.cn/en-US/docs/Web/CSS/CSS_animated_properties
啊哈!现在理解了transition的'all'值。谢谢。
太棒了,这解释了一切。
提供一个明确不能进行动画的属性列表会很棒(在某个地方,不一定是'Tricks'上)。
有没有人成功地将
img
元素从position:unset;
display:none;
动画到
position:absolute;
display:block;
并结合不同的
top
、right
值来使图像实际移动?我自己也在为此苦恼。
position
未包含在MDN的可动画属性列表中,但是right
、left
、top
、bottom
都列出了!唉您能否提供一个使用CSS变量在两种背景颜色状态之间过渡的最佳实践示例?
谢谢!
你好!这是一个在两种颜色之间悬停过渡的示例