Значок, чтобы начать переход в центре экрана - PullRequest
Новая
       9

Значок, чтобы начать переход в центре экрана

0 голосов
/ 28 февраля 2019

Я пытаюсь сделать так, чтобы значок появлялся в середине экрана, прежде чем он переместится влево.Вот мой код на данный момент: 

#courseIcon {
  position: relative;
  background: url(https://placehold.it/100x100);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  top: 0;
  left: 20%;
  margin-left: -125px;
}

/* ICON TRANSITION */
.moveIcon {
  -webkit-animation: moveIcon 2s;
  animation: moveIcon 2s;
  animation-fill-mode: backwards;
  animation-delay: 3s;
}

@-webkit-keyframes moveIcon {
  from {
    -webkit-transform: translateX(500px);
  }

  to {
    -webkit-transform: translateX(0px);
  }
}

@keyframes moveIcon {
  from {
    transform: translateX(500px);
  }

  to {
    transform: translateX(0px);
  }
}
<div id="courseIcon" class="moveIcon"></div>

На данный момент я только что установил translatex: 500px, так как это примерно половина экрана, на котором я его просматриваю.Есть ли способ заставить переход начать в центре страницы, независимо от размера экрана?Вот мой код в скрипке .

Спасибо за ваше время.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Вы можете рассмотреть использование левого (или правого), и вам не понадобятся сложные вычисления: 

#courseIcon {
  position: absolute;
  background: url(https://placehold.it/100x100) center/contain no-repeat;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

/* ICON TRANSITION */
.moveIcon {
  animation: moveIcon 2s forwards 3s;
}

@keyframes moveIcon {
  to {
    left:0;
  }
}

body {
 overflow:hidden;
}
<div id="courseIcon" class="moveIcon"></div>

Вы также можете сделать это, как показано ниже, без использования calc(), если вам нужна лучшая поддержка браузера: 

#courseIcon {
  position: absolute;
  background: url(https://placehold.it/100x100) center/contain no-repeat;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

/* ICON TRANSITION */
.moveIcon {
  animation: moveIcon 2s forwards 3s;
}

@keyframes moveIcon {
  to {
    left:0;
    transform:translate(0%,-50%);
  }
}

body {
 overflow:hidden;
}
<div id="courseIcon" class="moveIcon"></div>
0 голосов
/ 28 февраля 2019
  • Позиция #courseIcon абсолютно
  • Используйте преобразование / преобразование, чтобы начать в середине экрана
  • Анимируйте, используя transform/translate для ускорения с помощью графического процессора
  • Удалить from предложение (необязательно)
  • Чтобы предотвратить сброс animation после завершения, используйте animation-fill-mode: forwards

Редактировать : Удалено calcс animation расчет позиции.Как умно указывает @TemaniAfif, IE11 не поддерживает переходные значения, установленные с calc(). 

#courseIcon {
  position: absolute;
  background: url(https://placehold.it/100x100);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ICON TRANSITION */
.moveIcon {
  -webkit-animation: moveIcon 2s;
  animation: moveIcon 2s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}

@-webkit-keyframes moveIcon {
  to {
    -webkit-transform: translate(-50vw, -50%);
  }
}

@keyframes moveIcon {
  to {
    transform: translate(-50vw, -50%);
  }
}
<div id="courseIcon" class="moveIcon"></div>
...