如何在一个元素上同时进行多个 CSS 转换？-css教程-PHP中文网

如何在一个元素上同时进行多个 CSS 转换？

Mary-Kate Olsen

发布： 2024-12-15 05:44:08

原创

263 人浏览过

How Can I Make Multiple CSS Transitions on One Element Work Simultaneously?

元素上的多个 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);
}

登录后复制

在此代码中，颜色和和 text-shadow 属性定义了过渡效果。问题是第二个转换会覆盖第一个转换。因此，会出现文本阴影动画，但不会出现颜色动画。

要解决此问题并使两种过渡同时工作，请结合使用 CSS 过渡属性。操作方法如下：

逗号分隔的过渡属性

在所有支持过渡的浏览器中，过渡属性都可以用逗号分隔。通过用逗号分隔多个属性，可以同时触发两个过渡。

.nav a {
  transition: color .2s, text-shadow .2s;
}

登录后复制

指定缓动函数

默认情况下，过渡使用缓动计时函数。如果您希望使用不同的计时函数，例如线性，则必须显式指定。

transition: color .2s linear, text-shadow .2s linear;

登录后复制

Transition Properties Shorthand

在使用相同的计时和计时函数时使用更简洁的方法多个属性，使用transition-*属性而不是简写：

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

登录后复制

以上是如何在一个元素上同时进行多个 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！