CSS анимация, FadeIn / FadeOut 2 изображения непрерывно - PullRequest
Новая
       66

CSS анимация, FadeIn / FadeOut 2 изображения непрерывно

0 голосов
/ 14 апреля 2020

Я создал образец CodePen здесь.

Я попробовал ниже, но не сработало. 

 .elementToFadeInAndOut {
        width:200px;
        height: 200px;
        background: red;
        -webkit-animation: fadeinout 4s linear forwards;
        animation: fadeinout 4s linear forwards;
    }

    @-webkit-keyframes fadeinout {
      0%,100% { opacity: 0; }
      50% { opacity: 1; }
    }

    @keyframes fadeinout {
      0%,100% { opacity: 0; }
      50% { opacity: 1; }
    }

Как вы увидите, этот образец имеет 3 изображения. Я даю им id = "imge1", "imge2", "imge3"

img3 продолжает вращаться, используя ключевой кадр.

Мне нужно показать img1 и img2, показывающие своего рода эффект постепенного исчезновения.

, поэтому, когда img3 поворачивается ко дну, это время может быть fadeout img1 и fadeIn img2. (или наоборот)

в основном 2 изображения должны продолжать заменяться эффектом затухания, а img3 продолжает вращаться.

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

CSS как заставить элемент исчезать, а затем исчезать?

также, это должно быть сделано с использованием только чистых css. Я должен поместить это в следующий js проект. Спасибо

Ответы [ 3 ]

3 голосов
/ 14 апреля 2020

Вам нужно анимация-задержка и анимация-итерация-счет , чтобы достичь этого 

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
figure{
  width: 100vw;
  height: 50vh;
  position: relative;
  background: green;
  text-align: center;
}
picture{
  position: relative;
  display: inline-block;
  width: 25%;
}
picture img{
  width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
  background: red;
  animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
  background: red;
  animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
  animation: spin 4s linear infinite;
}
figcaption{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
} 
 
@keyframes fadeinout { 
  50% { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg);}
}
<figure>
  <picture>img1</picture>
  <picture>img2</picture>
  <picture>
    <img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
  </picture>
  <figcaption>Css Labs</figcaption>
</figure>
1 голос
/ 14 апреля 2020

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

  .flexDisplay{
     display: flex;
     background: #f1f1f1;
}
 .wrapper{
     display: flex 
}
 .img1{
     z-index:3;
}
 .loginImage1{
     width: 100%;
     height: 100%;
     position:absolute;
     left:0;
     top:0;
     z-index:1;
}
 .loginImage2{
     width: 100%;
     height: 100%;
     position:absolute;
     left:0;
     top:0;
     z-index:2;
}
 @keyframes spin {
     from {
        transform:rotate(0deg);
    }
     to {
        transform:rotate(360deg);
    }
}
 .img1{
     animation: spin 3s linear infinite;
     width: 200px;
     height: 200px;
     align-items: center;
}
 .img2{
     position: relative;
     width: 200px;
     height: 200px;
}
 .elementToFadeInAndOut1 {
     width:200px;
     height: 200px;
     background: red;
     -webkit-animation: fadeinout 4s linear infinite;
     animation: fadeinout 4s linear infinite;
}
 @-webkit-keyframes fadeinout {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}
 @keyframes fadeinout {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}
 .elementToFadeInAndOut2 {
     width:200px;
     height: 200px;
     background: red;
     -webkit-animation: fadeinout 4s linear infinite;
     animation: fadeinout 4s linear infinite;
     animation-delay:5s;
}
 @-webkit-keyframes fadeinout1 {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}
 @keyframes fadeinout1 {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}

Создано это перо: https://codepen.io/spaceCadett/pen/wvKKowL

1 голос
/ 14 апреля 2020

Смотри ниже. Я добавил цвет фона к третьему изображению, чтобы сделать его видимым. 

#img3 {
  background-color: red; /* to make it visible */
}

.flexDisplay {
  display: flex;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.loginImage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.img1 {
  animation: spin 3s linear infinite;
  opacity: 0.1;
  width: 200px;
  height: 200px;
  align-items: center;
}

.elementToFadeInAndOut {
  width: 200px;
  height: 200px;
  background: red;
  animation: fadeinout 4s linear infinite;
}

@keyframes fadeinout {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
<div class="flexDisplay">
  <div class="wrapper">
    <img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png  " class="loginImage" alt="branding logo" />
    <img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />

    <img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />

  </div>
</div>
...