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

时间:2019-01-08 14:15:53

标签: safari bootstrap-4 css-animations pulse

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

.pulse-btn .btn1shadow-pulsebox-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);
    }
}

1 个答案:

答案 0 :(得分:0)

所以。。有一个我不知道的-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;
}