центральный элемент перед применением анимации. css - PullRequest
Новая
       5

центральный элемент перед применением анимации. css

0 голосов
/ 08 февраля 2020

У меня есть div, который имеет известную ширину, но неизвестную высоту (height: auto).

Он должен быть анимирован, а затем центрирован по вертикали и горизонтали в браузере. Его родитель - это тело.

Я использую библиотеку animate. css CSS для анимации.

Если я использую translate для центрирования div, анимация смещает div вниз и вправо, а затем, когда анимация завершена, она «привязывается» обратно к центру экрана.

Я предполагаю, что это какой-то конфликт с переводом?

Любой идеи будут высоко оценены.

1 Ответ

0 голосов
/ 08 февраля 2020

Вы можете сделать это, если вы установите слой с абсолютной позицией и поиграете с переводом примерно так

HTML

<div class="container-layer">
  <div class="layer">
    Lorem ipsum dolor sit amet
  </div>
</div>

CSS

.container-layer {
    position:relative;
    height:100vh;
    width:100vw;
    display:block;
    }
.layer{
  -webkit-animation: animation 2s linear;
    margin: 0;
    max-width:90px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    }

@keyframes animation {
   0% {
    transform: translate(200%, 200%)
   }

   100% {
    transform: translate(-50%, -50%)
   }
}

https://jsfiddle.net/MAXXALANDER/rjmfbyg9/2/

Вы используете библиотеку анимации, но я думаю, что она работает так же

...