Граница анимации CSS не работает в сафари, даже если ключевые кадры объявлены - PullRequest
Новая
       18

Граница анимации CSS не работает в сафари, даже если ключевые кадры объявлены

0 голосов
/ 11 декабря 2018

У меня проблема с сафари, не воспроизводящим анимацию нижней границы для моей навигации, она работает на грани, Firefox, Chrome, просто не сафари. Я не совсем уверен, в чем проблема ... вот мой css: 

        @keyframes pageon{
            0% {border-bottom: 0px solid #7b7b7b;}
            100% {border-bottom: 3px solid #7b7b7b;}
        }

        @-webkit-keyframes pageon{
            0% {-webkit-border-bottom: 0px solid #7b7b7b;}
            100% {-webkit-border-bottom: 3px solid #7b7b7b;}
        }

        .pageon{
            animation-name: pageon;
            animation-duration: 200ms;
            animation-iteration-count: 1;
            animation-timing-function: ease-in;
            animation-fill-mode: forwards;
            -webkit-animation-name: pageon;
            -webkit-animation-duration: 200ms;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-fill-mode: forwards;
        }


        @keyframes pageoff{
            0% {border-bottom: 3px solid #7b7b7b;}
            100% {border-bottom: 0px solid #7b7b7b;}
        }

        @-webkit-keyframes pageoff{
            0% {-webkit-border-bottom: 3px solid #7b7b7b;}
            100% {-webkit-border-bottom: 0px solid #7b7b7b;}
        }

        .pageoff{
            animation-name: pageoff;
        animation-duration: 200ms;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
            -webkit-animation-name: pageoff;
            -webkit-animation-duration: 200ms;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: ease-out;
            -webkit-animation-fill-mode: forwards;
        }

пожалуйста, помогите !!спасибо :))

1 Ответ

0 голосов
/ 13 декабря 2018

Очевидно, это ошибка в Safari, просто добавьте начальные свойства границ для вашего элемента border-bottom: 0px solid #7b7b7b;, как вы можете видеть в примере. 

.pageon{
  width: 100px;
  height: 200px;
  background-color: tomato;
  border-bottom: 0px solid #7b7b7b;
  animation: 500ms pageon infinite;
}

Рабочий пример в Safari

...