Question

如何在css3上同时将两个过渡组合到一起工作？我正在使用罗盘。

以下是代码：

.team-member
{
    @include transition(color .25s linear, border .8s ease-in-out, border-color .8s ease-in-out);
    @include transition(color .25s linear, background-color .8s ease-in-out, background-color .8s ease-in-out);
    border-bottom: 6px solid $section-bg-color-default;
    background-color: $section-bg-color-default;    
}

.team-member:hover
{
    @include transition(color .25s linear, border .8s ease-in-out, border-color .8s ease-in-out);
    @include transition(color .25s linear, background-color .8s ease-in-out, background-color .8s ease-in-out);
    border-bottom: 6px solid $primary-accent-color;
    background-color: rgba(172,0,118,.08);
}

背景转换正常，但边框没有。

Answer 1

与任何其他CSS属性一样，转换会被其后的任何内容覆盖。因此border转换完全覆盖了background-color转换。把它们放在同一条线上。

.team-member
{
    @include transition(color .25s linear, background-color .8s ease-in-out, background-color .8s ease-in-out, border .8s ease-in-out, border-color .8s ease-in-out);
    border-bottom: 6px solid $section-bg-color-default;
    background-color: $section-bg-color-default;    
}

.team-member:hover
{
    @include transition(color .25s linear, background-color .8s ease-in-out, background-color .8s ease-in-out, border .8s ease-in-out, border-color .8s ease-in-out);
    border-bottom: 6px solid $primary-accent-color;
    background-color: rgba(172,0,118,.08);
}

多次转换无效（SCSS / CSS）

1 个答案: