Ключевые кадры CSS и анимация: импульс не работает в Safari, а радиус границы не применяется к эффекту импульса - PullRequest
Новая
       44

Ключевые кадры CSS и анимация: импульс не работает в Safari, а радиус границы не применяется к эффекту импульса

0 голосов
/ 08 января 2019

Проблема 1 : не удается настроить анимацию в браузере Safari (11.1 и 12.0 на Mac). В частности, .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);
    }
}

1 Ответ

0 голосов
/ 09 января 2019

Итак. Был -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;
}
...