Problem 1: I can't get the animation to pulse in Safari browser (11.1 and 12.0 on Mac). Specificly the .pulse-btn .btn2.

The .pulse-btn .btn1, with the shadow-pulse and box-shadow, work as intended.

Problem 2: I can't get border-radius effect to apply to the pulsing animation in any browser I try, .pulse-btn .btn2.

I'm using bootstrap 4.0 and I follow the structure and syntax from: https://css-tricks.com/almanac/properties/a/animation/#article-header-id-7 but can't get it to work.

What am I doing wrong?

    


        BUTTON
        


        BUTTON
        


        BUTTON

    

    .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);
        }
    }