0

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?

<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);
    }
}
Cirshiss
  • 81
  • 9

1 Answers1

0

So.. There was a -moz-outline-radius I wasn't aware of and it only works with mozilla.

Worth noting is that the correct propery name of what I was asking is -moz-outline-radius, not border-radius.

[edit]: So that takes care of Problem 2. I still would like to find an answer to the Safari pulse animation problem.

.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;
}
Cirshiss
  • 81
  • 9