CSS-анимация позиции объекта в Safari 12

Отображение изображения с object-fit и object-position работает в браузерах, которые их поддерживают, но в Safari 12 анимация свойства object-position для создания эффекта движения, похоже, ничего не делает (то же самое с использованием переходов CSS).

Это ошибка? или я что-то упускаю?

Я сделал простую коробку и изображение для демонстрации: https://codepen.io/Taruckus/pen/zyoGNX

  <html>
    <head>
    </head>
    <body>
      <div class = "wrap"><img src = "https://via.placeholder.com/500x2000" alt = ""></div>
    </body>
  </html>


 <style>
        .wrap {
            width: 400px;
            height: 400px;
            position: relative;
        }
        .wrap img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 0%;
            animation: move 5s ease 1 normal forwards;
            animation-delay: 0.2s;
        }

        @keyframes move {
            0% {
                object-position: 50% 30%;
            }
            100% {
                object-position: 50% 60%;
            }
        }
 </style>

css safari css-animations

18.12.2018 22:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 125

Ответы 1

Рассмотрите возможность анимации свойства transform. Было бы более производительно и кроссбраузерно.

Запустите приведенный ниже фрагмент:

.wrap {
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.wrap img {
  width: 100%;
  transform: translateY(-20%);
  animation: move 5s forwards .2s;
}

@keyframes move {
  100% {
    transform: translateY(-45%);
  }
}

<div class = "wrap">
  <img src = "https://via.placeholder.com/500x2000" alt = "">
</div>

Спасибо, но мне нужно изображение, чтобы поддерживать поведение «прикрытия» внутри своего контейнера. Прямо сейчас в качестве обходного пути я показываю изображение, как с background-image, и анимирую свойство background-position.

— 20.12.2018 01:08

19.12.2018 03:21