изображение не исчезает при использовании ключевых кадров - PullRequest
Новая
       23

изображение не исчезает при использовании ключевых кадров

0 голосов
/ 30 июня 2019

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

<div class="col-lg-6 col-md-2 col-sm-12">
  <img class="iphone_image" src="images/iphone6.png" alt="iphone-mockup">
</div>

и ниже мой css и ключевые кадры: 

.iphone_image {
  background-image: url("images/iphone6.png");
  width: 60%;
  transform: rotate(25deg);
  animation-name: image-appear;
  animation-duration: 10s;
  animation-delay: 5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}
@keyframes image-appear {
  from {opacity:0;}
  to {opacity: 1;}
}

Что я хочу сделать, это когда веб-страница загружается, есть переход к тому, когда изображениепоявляется.Любая помощь будет оценена.

1 Ответ

0 голосов
/ 30 июня 2019

Вы должны добавить opacity: 0; к стандартному состоянию изображения: 

.iphone_image {
  background-image: url("images/iphone6.png");
  width: 60%;
  transform: rotate(25deg);
  animation-name: image-appear;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  opacity: 0;
}

@keyframes image-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<div class="col-lg-6 col-md-2 col-sm-12">
  <img class="iphone_image" src="http://lorempixel.com/400/200/" alt="iphone-mockup">
</div>
...