CSS Animation, Fadein/Fadeout 2 Images Continuously

CSS how to make an element fade in and then fade out?

Use css @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}

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

here is a DEMO

.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; }}

<div class=elementToFadeInAndOut></div>

CSS animation, fade in fade out opacity on automated slideshow

Just modify the .fade class to this

.fade {
  -webkit-animation: fade 5s;
  animation: fade 5s;
  -moz-animation: fade 5s;
  -o-animation: fade 5s;
}

Because animation-name does not expect a timeinterval, it only expects the name.

.fade {-webkit-animation: fade 5s;animation: fade 5s;-moz-animation: fade 5s;-o-animation: fade 5s;}
@-webkit-keyframes fade {0% {opacity: 0.2} 50% {opacity: 1}100% {opacity:0.2}}
@-moz-keyframes fade{    0% {opacity: 0.2}   50% {opacity: 1}  100% {opacity:0}  }
@keyframes fade {  0% {opacity: 0.2}   50% {opacity: 1}  100%{opacity: 0.2}    }@-o-keyframes fade {0% {opacity: 0.2}   50% {opacity: 1}  100%{opacity: 0.2}
}

<div class="slideshowcontainer">        <div class="slideshow fade">            <img src="https://images-na.ssl-images-amazon.com/images/I/71%2BmEwFaoaL._SL1500_.jpg" width="200px" height: "200px">        </div>        </div>

How do I make two images fade in/out repeatedly?

CSS Animation

• Wrap both images in a block element that has: position:relative

• Set both images to position:absolute

• Make 2 @keyframes and animation: 10s infinite alternate

• Assign a @keyframe animation to each image.

• The 2 properties being animated is opacity and z-index (z-index is only on 2 frames because there's only 2 states really lower or higher than another positioned element).

Demo

#promo {
  margin-top: 33px;
  position: relative;
}

img {
  width: 320px;
  height: 267px;
  position: absolute;
}

.A {
animation: animA 10s infinite alternate;
}

.B {
animation: animB 10s infinite alternate;
}

@keyframes animA {
  0%, 25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .5;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .5;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}

<figure id="promo">
  <img src="https://pockey.io/assets/promo_xmas.png" class='B'>

  <img src="https://pockey.io/assets/howtoplay.gif" class='A'>
</figure>

FadeOut element to FadeIn another in the same place with CSS animations

Until that I was fine, but I can't make the fadeIn/fadeOut work. Is
there a way to handle this by toggling a CSS class over the parent
element?

You can do this without animation with toggle classes

$('.toggle-btn').click(function() {  $('.parent').toggleClass('expanded');  $('.children-2').toggleClass('show1');  $('.children-1').toggleClass('show2');});

.parent {  width: 40px;  height: 40px;  background-color: lightgray;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  border-radius: 50%;  position: fixed;  left: 11px;  bottom: 18px;  text-align: center;  transition: all 500ms;  -webkit-transition: all 500ms;  -moz-transition: all 500ms;}
.parent.expanded {  width: 200px;  height: 200px;  border-radius: 0 14px 0 0;  left: 0;  bottom: 0;}
.children-1 {  display: block;  animation: opacity-up 500ms lineal 0s 1;  animation-fill-mode: forwards;}
.help {  width: 21px;  height: 21px;  position: relative;  top: 9px;}
.children-2 {  opacity: 0;  transition: opacity 1s;}
.children-1 {  opacity: 1;  transition: opacity 1s;}
.show1 {  opacity: 1;}
.show2 {  opacity: 1;}
.parent.expanded .children-1 {  animation: opacity-down 500ms lineal 0s 1;  animation-fill-mode: forwards;  display: none;}
.parent.expanded .children-2 {  animation: opacity-up 500ms lineal 0s 1;  animation-fill-mode: forwards;  display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="parent">  <div class="children-1">    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />  </div>  <div class="children-2">    <p class="paragraph">      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff    </p>  </div></div>
<button class="toggle-btn">TOGGLE!</button>

How to constantly alternate two images

To solve the issue with transparent images overlaying each other you can use your current technique to fade out the underlying image as the new one is displayed over it. To do that add a 1 second delay to its animation. Try this:

section img {
  position: absolute;
  width: 200px;
  animation: fade 1s infinite alternate;
}

.bottom {
  animation-delay: 1s;
}

@keyframes fade {
  0% { opacity: 1; }
  25% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

<section>
  <img class="bottom" src="https://placeimg.com/640/480/nature">
  <img class="top" src="https://placeimg.com/640/480/arch">
</section>

Simple CSS Animation Loop – Fading In & Out Loading Text

As King King said, you must add the browser specific prefix. This should cover most browsers:

@keyframes flickerAnimation {  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-o-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-moz-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-webkit-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}.animate-flicker {   -webkit-animation: flickerAnimation 1s infinite;   -moz-animation: flickerAnimation 1s infinite;   -o-animation: flickerAnimation 1s infinite;    animation: flickerAnimation 1s infinite;}

<div class="animate-flicker">Loading...</div>

---

Related Topics