Блог

Главная - Вопросы по программированию - HTML и CSS — Safari web и mobile не будут работать

HTML и CSS — Safari web и mobile не будут работать

#html #css #safari #mobile-safari #css-animations

#HTML #css #safari #mobile-safari #css-анимация

Вопрос:

Привет, у меня есть анимация на аватаре, которая не работает в Safari.
Анимация — это примерно две строки, которые идут вокруг аватара. Я добавил @-webkit-keyframes , но все равно ничего не изменилось. Код здесь:

(Первый класс, который вызывает ключевой кадр)

 .bp-user {

    content: '';
    animation: clipMe 8s linear infinite;
    -webkit-animation: clipMe 8s linear infinite;
    -moz-animation: clipMe 8s linear infinite;
    -ms-animation: clipMe 8s linear infinite;
    -o-animation: clipMe 8s linear infinite;
}

(ключевой кадр, который работает в Chrome, но не в Safari)

 @-webkit-keyframes clipMe {

    0%, 100% {clip: rect(0px, 160px, 0px, 0px);}
    25% {clip: rect(0px, 0px, 160px, 0px);}
    50% {clip: rect(160px, 160px, 160px, 0px);}
    75% {clip: rect(0px, 160px, 160px, 160px);}
    100% {clip: rect(0px, 160px, 0px, 0px);}
}

Комментарии:

1. в вашей первой строке @-webkit-keyframes clipMe есть оба 0%, 100% {...} .. это верно? Также просто для подтверждения, ваша версия Safari 4?

2. @NikhilNanjappa первая строка правильная, и она работает в других браузерах, кроме Safari. Моя версия Safari 5.1.7, а на мобильных устройствах не знаю точно версию, кроме iPhone 6, поэтому я думаю, что у меня близкая к последней версии. Также я обнаружил, что safari нужны ключевые кадры, чтобы перейти от 0% и должны содержать 100%, я поставил это, но все равно ничего

3. Также в safari короткие обозначения дают проблему, поэтому вместо -webkit-animation: clipMe 8s linear infinite; того, чтобы пытаться -webkit-animation-name: clipMe; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; . Можете ли вы подтвердить

4. @NikhilNanjappa Я все еще ничего не пробовал в Safari web и Safari mobile, он не перемещается, он просто исправлен, и он выглядит как граница

5. clip устарел / устарел — developer.mozilla.org/en/docs/Web/CSS/clip Используйте clip-path вместо этого.