时间戳

首页 > 解决方案 > CSS 关键帧和动画：脉冲在 Safari 上不起作用，边框半径不适用于脉冲效果

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

问题描述

问题 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);
    }
}

标签： safaribootstrap-4css-animationspulse

解决方案

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

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

[编辑]：这样就可以解决问题 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;
}

推荐阅读