CSS анимация объекта-положения в Safari 12 - PullRequest
Новая
       67

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

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

Отображение изображения с подгонкой объекта и позицией объекта работает в браузерах, которые их поддерживают, но в Safari 12 анимация свойства объекта-позиции для создания эффекта перемещения, похоже, ничего не делает (то же самое с использованием переходов 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>

1 Ответ

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

Рассмотрим анимацию 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>
...