Блог

Главная - Вопросы по программированию - Анимация тени окна прослушивается в браузерах Safari

Анимация тени окна прослушивается в браузерах Safari

#css #animation #keyframe

#css #Анимация #ключевой кадр

Вопрос:

На моем веб-сайте есть простая анимация теневых блоков (встроенная в Elementor, WordPress). Анимация отлично работает в Chrome, но в Safari она создает эту странную квадратную анимацию (как для мобильных устройств, так и для ноутбуков):

введите описание изображения здесь

Это CSS, который я использовал для создания анимации теней в ящиках. Не могли бы вы сказать мне, что я делаю не так?

Спасибо!

 .hero_button_homepage svg{
     border-radius: 150px!important;
    animation: pulse-orange 2s infinite!important;
  width:60px;
  height:60px;
  border-color: red;
}
@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
    }
}
@-webkit-keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
            -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow:  0 0 0 20px rgba(249, 172, 102, 0);
    }
}
@-moz-keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow:  0 0 0 20px rgba(249, 172, 102, 0);
    }
}
@-o-keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
            -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow:  0 0 0 20px rgba(249, 172, 102, 0);
    }
} 
 <div class="hero_button_homepage">
  <div class="elementor-widget-container">
    <div class="elementor-icon-box-wrapper">
       <div class="elementor-icon-box-icon">
          <a class="" href="">
            <svg xmlns="http://www.w3.org/2000/svg" width="86" height="86" viewBox="0 0 86 86" fill="none"><path d="M57.5 43.866L38 55.1244C37.3333 55.5093 36.5 55.0281 36.5 54.2583L36.5 31.7417C36.5 30.9719 37.3333 30.4907 38 30.8756L57.5 42.134C58.1667 42.5189 58.1667 43.4811 57.5 43.866Z" stroke="#F9F6F1" stroke-width="2"></path><circle cx="43" cy="43" r="42" stroke="#F9AC66" stroke-width="2" stroke-linecap="round"></circle></svg>               </a>
            </div>
            <div class="elementor-icon-box-content">
                <h3 class="elementor-icon-box-title">
                    <a href=""> Watch the full video</a>
                </h3>
            </div>
        </div>
    </div>
</div>

Ответ №1:

Оберните свой svg в оболочку и примените к ней свою анимацию. Анимация в SVG может быть сложной, потому что ваш путь может сократить определенные вещи, чтобы добиться его внешнего вида.

Кроме того, ваш HTML имеет плохой отступ, что может быть причиной того, что у вас есть закрывающий div тег под вами svg , у которого нет соответствующего открывающего тега. Ваш закрывающий a тег «скрыт» полностью в конце вашей строки svg.

Очистите это и оберните свой svg, и все должно быть готово.

ПРИМЕЧАНИЕ: я обратился margin: 5rem; к вам .hero_button_homepage , чтобы дать понять, что это работает. Не забудьте удалить это, прежде чем внедрять приведенное ниже.

Редактировать: я уверен, что вы должны добавлять анимации -webkit- перед -moz- своим обычным объявлением и ПЕРЕД ним: например:

 .foo-bar {
    -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
    box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
}

Вы можете увидеть, какие префиксы вы должны использовать в shouldiprefix.com

 .hero_button_homepage { margin: 5rem; }
.hero_button_homepage .svg_wrapper {
     border-radius: 150px!important;
    animation: pulse-orange 2s infinite!important;
  width:60px;
  height:60px;
  border-color: red;
}
.hero_button_homepage svg {
     border-radius: 150px!important;
    animation: pulse-orange 2s infinite!important;
  width:60px;
  height:60px;
  border-color: red;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
    }
}
@-webkit-keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
            -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow:  0 0 0 20px rgba(249, 172, 102, 0);
    }
}
@-moz-keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow:  0 0 0 20px rgba(249, 172, 102, 0);
    }
}
@-o-keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
            -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
        -moz-box-shadow:  0 0 0 0 rgba(249,172,102,0.7);
    }
    
    70% {
        box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
        -moz-box-shadow:  0 0 0 20px rgba(249, 172, 102, 0);
    }
} 
 <div class="hero_button_homepage">
  <div class="elementor-widget-container">
    <div class="elementor-icon-box-wrapper">
       <div class="elementor-icon-box-icon">
          <a class="" href="">
             <div class="svg_wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" width="86" height="86" viewBox="0 0 86 86" fill="none"><path d="M57.5 43.866L38 55.1244C37.3333 55.5093 36.5 55.0281 36.5 54.2583L36.5 31.7417C36.5 30.9719 37.3333 30.4907 38 30.8756L57.5 42.134C58.1667 42.5189 58.1667 43.4811 57.5 43.866Z" stroke="#F9F6F1" stroke-width="2"></path><circle cx="43" cy="43" r="42" stroke="#F9AC66" stroke-width="2" stroke-linecap="round"></circle></svg>               </a>
            </div>
            <div class="elementor-icon-box-content">
                <h3 class="elementor-icon-box-title">
                    <a href=""> Watch the full video</a>
                </h3>
            </div>
        </div>
    </div>
</div>

Метки: