作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是一个非常简单的问题,但我找不到关于 CSS 过渡属性的非常好的文档。这是 CSS 片段:
.nav a
{
text-transform:uppercase;
text-decoration:none;
color:#d3d3d3;
line-height:1.5 em;
font-size:.8em;
display:block;
text-align:center;
text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
.nav a:hover
{
color:#F7931E;
text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
如您所见,过渡属性相互覆盖。就目前而言,文本阴影将具有动画效果,但颜色不会。我如何让它们同时动画?感谢您的回答。
最佳答案
在所有支持转换的浏览器中,转换属性都是逗号分隔的:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease
是默认的计时函数,因此您不必指定它。如果你真的想要 linear
,你需要指定它:
transition: color .2s linear, text-shadow .2s linear;
这开始变得重复,所以如果您要在多个属性中使用相同的时间和计时函数,最好继续使用各种 transition-*
属性而不是简写:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
关于animation - 如何在一个元素上有多个 CSS 过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56722509/
我是一名优秀的程序员,十分优秀!