Question

问题1 ：我无法使动画在Safari浏览器中脉动（在Mac上为11.1和12.0）。具体是.pulse-btn .btn2。

.pulse-btn .btn1与shadow-pulse和box-shadow一起正常工作。

问题2 ：在尝试使用的任何浏览器border-radius中，我都无法获得.pulse-btn .btn2效果来应用于脉动动画。

我正在使用bootstrap 4.0，但遵循https://css-tricks.com/almanac/properties/a/animation/#article-header-id-7的结构和语法，但是无法正常工作。

我在做什么错了？

<div class='pulse-btn'>

    <button class='btn btn-primary giftBtn pulse-border'>BUTTON</button>
    <br><br>
    <button class='btn btn1 btn-primary giftBtn'>BUTTON</button>
    <br><br>
    <button class='btn btn2 btn-primary giftBtn'>BUTTON</button>

</div>

.giftBtn {
    text-transform: uppercase;
    background-color: #f7beca;
    color: #000;
    border-color: #000;
}

.pulse-btn {
    text-align: center;
}

.pulse-btn .btn1 {
    animation: shadow-pulse 1s infinite;
}

.pulse-btn .btn2 {
    border-radius: 7px;
    -webkit-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
       -moz-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
         -o-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
            animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
}

@-webkit-keyframes pulse {
    0% {
        outline: 1px solid #C56378;
        outline-offset: 0px;
        -webkit-border-radius: 7px;
    }
    30% {
        outline: 1px solid rgba(197, 99, 120, 0.7);
        outline-offset: 5px;
        -webkit-border-radius: 7px;
    }
    60% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 10px;
        -webkit-border-radius: 7px;
    }
    100% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 30px;
        -webkit-border-radius: 7px;
    }
}
@-moz-keyframes pulse {
    0% {
        outline: 1px solid #C56378;
        outline-offset: 0px;
        -moz-border-radius: 7px;
    }
    30% {
        outline: 1px solid rgba(197, 99, 120, 0.7);
        outline-offset: 5px;
        -moz-border-radius: 7px;
    }
    60% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 10px;
        -moz-border-radius: 7px;
    }
    100% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 30px;
        -moz-border-radius: 7px;
    }
}
@-o-keyframes pulse {
    0% {
        outline: 1px solid #C56378;
        outline-offset: 0px;
        -o-border-radius: 7px;
    }
    30% {
        outline: 1px solid rgba(197, 99, 120, 0.7);
        outline-offset: 5px;
        -o-border-radius: 7px;
    }
    60% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 10px;
        -o-border-radius: 7px;
    }
    100% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 30px;
        -o-border-radius: 7px;
    }
}
@keyframes pulse {
    0% {
        outline: 1px solid #C56378;
        outline-offset: 0px;
        border-radius: 7px;
    }
    30% {
        outline: 1px solid rgba(197, 99, 120, 0.7);
        outline-offset: 5px;
        border-radius: 7px;
    }
    60% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 10px;
        border-radius: 7px;
    }
    100% {
        outline: 1px solid rgba(197, 99, 120, 0);
        outline-offset: 30px;
        border-radius: 7px;
    }
}

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
}

Answer 1

所以。。有一个我不知道的-moz-outline-radius，它仅适用于mozilla。

值得注意的是，我要问的正确属性名称是 -moz-outline-radius ，而不是border-radius。

[edit]：这样可以解决问题2 。我仍然想找到Safari脉冲动画问题的答案。

.pulse-btn .btn2 {
    text-transform: uppercase;

    -moz-outline-radius: 7px; /* ONLY WORKS WITH MOZILLA */

    -webkit-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
       -moz-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
         -o-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
            animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
}

CSS关键帧和动画：脉冲在Safari上不起作用，并且边界半径不适用于脉冲效果

1 个答案: