1

Не получается сделать начальную точку для изображения, которое анимировано.

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

.cloud {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background-size: cover;
}

img {
  width: 100px;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

@keyframes animCloud {
  0% {
    transform: translateX(100%)
  }
  100% {
    transform: translateX(-100%)
  }
}

.cloud1 {
  -webkit-animation: animCloud 40s infinite linear;
  -moz-animation: animCloud 40s infinite linear;
  animation: animCloud 40s infinite linear
}
<div class="cloud">
  <img src="https://img2.pngindir.com/20180327/brw/kisspng-cobalt-blue-azure-aqua-electric-blue-cloud-5aba2ae48c39b5.1606665915221501165744.jpg" alt="" class="cloud1">
</div>

Вообщем мне надо, чтобы в первый раз (при первой загрузке) кейфрейм был такой:

transform: translateX(0%)

Как мне добиться такого результата?

0

1 ответ 1

2

Первый вариант (на transform: translateX()):

.cloud {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background-size: cover;
}

img {
  width: 100px;
  top: 0;
  right: 0;
  transform: translateX(100%);
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

@keyframes animCloud {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100vw);
  }
}

.cloud1 {
  -webkit-animation: animCloud 5s infinite linear;
  -moz-animation: animCloud 5s infinite linear;
  animation: animCloud 5s infinite linear;
}
<div class="cloud">
  <img src="https://img2.pngindir.com/20180327/brw/kisspng-cobalt-blue-azure-aqua-electric-blue-cloud-5aba2ae48c39b5.1606665915221501165744.jpg" alt="" class="cloud1">
</div>

Второй вариант (на right)

.cloud {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background-size: cover;
}

img {
  width: 100px;
  top: 0;
  right: 0;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

@keyframes animCloud {
  0% {
    right: -100px;
  }
  100% {
    right: calc(100% + 100px);
  }
}

.cloud1 {
  -webkit-animation: animCloud 5s infinite linear;
  -moz-animation: animCloud 5s infinite linear;
  animation: animCloud 5s infinite linear
}
<div class="cloud">
  <img src="https://img2.pngindir.com/20180327/brw/kisspng-cobalt-blue-azure-aqua-electric-blue-cloud-5aba2ae48c39b5.1606665915221501165744.jpg" alt="" class="cloud1">
</div>


Из центра

.cloud {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background-size: cover;
}

img {
  width: 100px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

@keyframes animCloud {
  0% {
    transform: translateX(0);
  }
  49.99% {
    transform: translateX(calc(-50vw - 100px));
  }
  50% {
    transform: translateX(calc(50vw + 100px));
  }
  100% {
    transform: translateX(0);
  }
}

.cloud1 {
  -webkit-animation: animCloud 5s infinite linear;
  -moz-animation: animCloud 5s infinite linear;
  animation: animCloud 5s infinite linear;
}
<div class="cloud">
  <img src="https://img2.pngindir.com/20180327/brw/kisspng-cobalt-blue-azure-aqua-electric-blue-cloud-5aba2ae48c39b5.1606665915221501165744.jpg" alt="" class="cloud1">
</div>

3
  • Да. Но мне надо чтобы начиналась вся анимация из центра (изображение изначально по центру), а потом уже, как сейчас у вас работает.
    – WoodRest
    4 июн 2019 в 7:48
  • Спасииибоооооо!!!
    – WoodRest
    5 июн 2019 в 11:57
  • @WoodRest, всегда пожалуйста)
    – De.Minov
    5 июн 2019 в 15:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.