I'm trying to use CSS or jQuery to constantly switch between two images. What I have works ok, but it's essentially placing an image on top of the other one, which causes issues if the images I'm using are transparent.
section {
position: relative;
}
section img {
position: absolute;
width: 200px;
}
.top {
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
#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>
Codepen: https://codepen.io/Rhys_Eng/pen/NWdwxaO
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>
If you wanted to change the image without fading, while still using CSS alone, then you can amend the keyframes to this:
#keyframes fade {
0% { opacity: 1; }
49% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
Related
How do I get the three columns to display next to each other rather than on top of each other? Of course I also want them to be responsive and fade.
My fiddle: https://jsfiddle.net/Spleendrivel/dswufb78/3/
<!DOCTYPE html>
<html>
<head>
<meta name="ac:base" content="/AlmostYou">
<base href="/AlmostYou/">
<style>
/* Slider */
/* Slideshow container */
#slide-container-1 {
position: relative;
max-width: 100%;
/* responsiveness */
}
/* Slider */
/* Slideshow container */
#slide-container-2 {
position: relative;
max-width: 100%;
/* responsiveness */
}
/* Slider */
/* Slideshow container */
#slide-container-3 {
position: relative;
max-width: 100%;
/* responsiveness */
}
/* First element to be in block mode for responsiveness */
#slide-element-1 {
display: block;
/* to get the dimensions set */
width: 100%;
height: auto;
}
/* First element to be in block mode for responsiveness */
#slide-element-4 {
display: block;
/* to get the dimensions set */
width: 100%;
height: auto;
}
/* First element to be in block mode for responsiveness */
#slide-element-7 {
display: block;
/* to get the dimensions set */
width: 100%;
height: auto;
}
/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3,
#slide-element-5,
#slide-element-6,
#slide-element-8,
#slide-element-9 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Style images */
.slide-image {
width: 100%;
border-radius: 20px;
}
/* Style text */
.slide-text {
position: absolute;
bottom: 10px;
background-color: #0042b1bb;
color: white;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-element-1 {
animation: fade-1 10s infinite;
-webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
animation: fade-2 10s infinite;
-webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
animation: fade-3 10s infinite;
-webkit-animation: fade-3 10s infinite;
}
#slide-element-4 {
animation: fade-4 10s infinite;
-webkit-animation: fade-4 10s infinite;
}
#slide-element-5 {
animation: fade-5 10s infinite;
-webkit-animation: fade-5 10s infinite;
}
#slide-element-6 {
animation: fade-6 10s infinite;
-webkit-animation: fade-6 10s infinite;
}
#slide-element-7 {
animation: fade-7 10s infinite;
-webkit-animation: fade-7 10s infinite;
}
#slide-element-8 {
animation: fade-8 10s infinite;
-webkit-animation: fade-8 10s infinite;
}
#slide-element-9 {
animation: fade-9 10s infinite;
-webkit-animation: fade-9 10s infinite;
}
/* and more if there are more slides to show */
#keyframes fade-1 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-2 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-3 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-4 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-5 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-6 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-7 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-8 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-9 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div id="slide-container-1">
<div id="slide-element-1">
<img class="slide-image" src="barn-3.jpg">
</div>
<div id="slide-element-2">
<img class="slide-image" src="barn-2.jpg">
</div>
<div id="slide-element-3">
<img class="slide-image" src="barn-1.jpg">
</div>
</div>
</div>
<div class="column">
<div id="slide-container-2">
<div id="slide-element-4">
<img class="slide-image" src="cat-1.jpg">
</div>
<div id="slide-element-5">
<img class="slide-image" src="cat-2.jpg">
</div>
<div id="slide-element-6">
<img class="slide-image" src="cat-3.jpg">
</div>
</div>
</div>
<div class="column">
<div id="slide-container-3">
<div id="slide-element-7">
<img class="slide-image" src="dog-2.jpg">
</div>
<div id="slide-element-8">
<img class="slide-image" src="dog-1.jpg">
</div>
<div id="slide-element-9">
<img class="slide-image" src="dog-3.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
Make sure the screen width is no more than 350 to see my problem.
I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content.
I guess you have to use css grid or flexbox;
but css grid is the best choice here:
.row {
display: grid;
grid-templates-rows: auto; // you can add columns as many as you want..
grid-templates-columns: repeat(3, 1fr); //.. but you will get 3 columns for each row
}
if didn't work then you have to make some changes in your css.
I think you can try using flexbox (flex-direction: row)
Here is the final answer:
my JSFiddle: https://jsfiddle.net/Spleendrivel/mcyvpx3r/2/
<!DOCTYPE html>
<html>
<head>
<meta name="ac:base" content="/AlmostYou">
<base href="/AlmostYou/">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.fadein-1 img {
position: absolute;
top: 0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.fadein-2 img {
position: absolute;
top: 0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.fadein-3 img {
position: absolute;
top: 0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#f2 {
-webkit-animation-delay: -4s;
}
#f3 {
-webkit-animation-delay: -2s;
}
#f5 {
-webkit-animation-delay: -4s;
}
#f6 {
-webkit-animation-delay: -2s;
}
#f8 {
-webkit-animation-delay: -4s;
}
#f9 {
-webkit-animation-delay: -2s;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="fadein-1">
<img id="f3" src="http://snaklvr.com/barn-3.jpg">
<img id="f2" src="http://snaklvr.com/barn-2.jpg">
<img src="http://snaklvr.com/barn-1.jpg">
</div>
</div>
<div class="column">
<div class="fadein-2">
<img src="http://snaklvr.com/cat-3.jpg">
<img id="f5" src="http://snaklvr.com/cat-2.jpg">
<img id="f6" src="http://snaklvr.com/cat-1.jpg">
</div>
</div>
<div class="column">
<div class="fadein-3">
<img src="http://snaklvr.com/dog-3.jpg">
<img id="f8" src="http://snaklvr.com/dog-2.jpg">
<img id="f9" src="http://snaklvr.com/dog-1.jpg">
</div>
</div>
</div>
</body>
</html>
I am sure there is some unnecessary CSS or possibly redundancy, but it works as I need!
Flex is your best friend when it comes to arranging elements in a grid and not using a framework such as bootstrap. Here's a great resource for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Also, if any of the answers fixed your issue, please mark it as accepted.
I've made a small Image animation where images changes opacity over time.It works smoothly but when last image gets to 100% it jumps straight to 0% without any transition.
I have already tried animation-direction: alternate for third image and delay for all image but it does not work for me. Delay works only first step of animation cycle after it delay becomes 0 for all.
Here is my CSS
.rightside .img-container img.first {
animation-name: first-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-delay: -10s; */
}
.rightside .img-container img.second {
position: absolute;
top: 0;
animation-name: second-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.rightside .img-container img.third {
position: absolute;
top: 0;
animation-name: final-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* animation-direction: alternate; */
}
#keyframes first-image {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes second-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes final-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="img-container">
<img src="Images/Apple.png" class="first turn" alt="Image Here" />
<img src="Images/Bee.png" class="second" alt="Image Here" />
<img src="Images/Cat.png" class="third" alt="Image Here" />
</div>
The clasical aproach to this would be just using different delays:
div {
animation-name: all;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: yellow;
}
.first {
animation-delay: -3s;
background-color: lightgreen;
}
.third {
animation-delay: -6s;
background-color: lightblue;
}
#keyframes all {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
I have a loader animation in CSS. It rotates 4 divs in a circular fashion. The issue I'm having is that the 4th div (red) is shown initially with no fade in disrupting the flow of the animation (you may have to refresh to see).
What would be the best way to fix this so that the animation's loop is improved?
The Code (https://jsfiddle.net/bduaxvmp/):
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 0s infinite;
}
.loader .bullet:nth-child(1) {
animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
animation-delay: 0.15s;
}
.loader .bullet:nth-child(3) {
animation-delay: 0.3s;
}
.loader .bullet:nth-child(4) {
animation-delay: 0.45s;
background: red;
}
#-webkit-keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
<div class="loader">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
Solution:
Set the animation-fill-mode as backwards for the animation. Using this option for the fill mode will make the elements take the state as at the 0% frame during the animation-delay period and hence all the elements will be transparent and in their translated position till the animation actually kicks in.
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 0s infinite backwards;
}
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 0s infinite backwards;
}
.loader .bullet:nth-child(1) {
animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
animation-delay: 0.15s;
}
.loader .bullet:nth-child(3) {
animation-delay: 0.3s;
}
.loader .bullet:nth-child(4) {
animation-delay: 0.45s;
background: red;
}
#-webkit-keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
#keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
<div class="loader">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
Alternately, you could set the same properties as the 0% frame to the element's default state also and avoid setting animation-fill-mode to backwards but I feel that it is a repetition that could be avoided for this case.
Reason:
The issue I'm having is that the 4th div (red) is shown initially with no fade
Note that the problem is not just the 4th div. Actually the problem is for all the div elements that have the animation delay. Visually only 4th div exhibits the problem because all are absolutely positioned and the 4th div appears on top of the rest due to it being later in the DOM.
If you set a different background color and a higher z-index to the 3rd or 2nd div, you'd see that the same problem happens for them also.
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-in-out 1s infinite;
}
.loader .bullet:nth-child(1) {
animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
animation-delay: 0.15s;
/*background: blue;
z-index: 4 */
}
.loader .bullet:nth-child(3) {
animation-delay: 0.3s;
background: yellow;
z-index: 2;
}
.loader .bullet:nth-child(4) {
animation-delay: 0.45s;
/*background: red;*/
}
#-webkit-keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
#keyframes animIn {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
<div class="loader">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
The reason this problem happens is because of the way in which animations work. Any animation will continue to hold its default state (specified outside of the animation) till the time the delay timer expires. Setting animation-fill-mode as backwards makes the animation take the state as at first applicable frame even during the delay period and thus avoids the issue.
From MDN:
backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
I want to toggle one image with another and vice-versa continuously with some time delay. This is not working in Webkit browsers such as Chrome and Safari.
Here's what I'm doing:
.bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.top {
animation-name: toggle;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
#keyframes toggle {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<img class="bottom bkgd_img" src="http://www.placehold.it/500/FF0000" />
<img class="top bkgd_img" src="http://www.placehold.it/500/FF9900" />
The problem that I'm getting is that the "top" image never becomes transparent, the animation does not happen. Where am I going wrong?
Do I need to use browser prefixes for CSS3 Animation in Webkit based browsers?
Yes, the -webkit- prefix is still required currently.
Take a look at this reference here — Currently Chrome, Safari and Opera require the -webkit- prefix in order to support Keyframe Animations.
A note to future readers — This will change in the future as browser vendors adapt the native animation properties. Ensure that the non-prefixed animation property is also used underneath the webkit prefix.
Complete Example
Note: The non prefixed property should be placed underneath the -webkit- prefix. This ensures that supporting browsers will use the native CSS property.
The animation properties have been condensed into one: animation: toggle 5s ease-in-out infinite alternate
.bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.top {
-webkit-animation: toggle 5s ease-in-out infinite alternate;
animation: toggle 5s ease-in-out infinite alternate;
}
#-webkit-keyframes toggle {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes toggle {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<img class="bottom bkgd_img" src="http://www.placehold.it/500/FF0000" />
<img class="top bkgd_img" src="http://www.placehold.it/500/FFFF00" />
tested your code in Firefox 32 and IE10 and Chrome 36. It seems to work fine with IE and Mozilla. But does not work well with chrome. Chrome has different CSS notations, it is not able to read them, kindly use following code for chrome. You can retain your previous code for other browsers
.top {
-webkit-animation-name:toggle;
animation-name: toggle;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes toggle {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
You missed vendor specific css property.
-webkit-animation: toggle 5s infinite;
#-webkit-keyframes toggle {}
Refer the working code.
http://codepen.io/bhuvana/pen/dPYzdZ
If you want to use JQuery with a simple way of doing this. There are other ways of doing it example: toggle()
HTML:
<img class="bottom bkgd_img" src="xyz.jpg" id="img-change" />
JQuery:
$('#img-change').on({
'click': function () {
var originalsrc = $(this).attr('src');
var src = '';
if (originalsrc == 'xyz.jpg') src = 'abc.jpg';
if (originalsrc == 'abc.jpg') src = 'xyz.jpg';
$(this).attr('src', src);
}
});
Note: I didn't try it, but it probably works.
You have to use vendor specific code, you can check it in below code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.top {
-webkit-animation: 5s 'toggle' infinite alternate;
-moz-animation: 5s 'toggle' infinite alternate;
-o-animation: 5s 'toggle' infinite alternate;
animation: 5s 'toggle' infinite alternate;
}
#keyframes 'toggle' {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}#-webkit-keyframes 'toggle' {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}#-moz-keyframes 'toggle' {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}#-o-keyframes 'toggle' {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
</style>
</head>
<body>
<img class="bottom bkgd_img" src="xyz.jpg" />
<img class="top bkgd_img" src="abc.jpg" />
</body>
</html>
I'm trying to use HTML and CSS to crossfade two images after showing them for 10 seconds each. I want this to repeat constantly.
Here is my HTML:
<div id="container">
<img class="bottom" src="1.png">
<img class="top" src="2.png">
</div>
CSS:
#container {
float: right;
height: 246px;
position:relative;
width: 230px;
}
#container img {
height: 246px;
width: 230px;
left:0;
opacity: 0;
position:absolute;
}
#container img.bottom {
opacity: 1;
}
#container img.top {
animation-duration: 0.1s;
animation-name: crossFade;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes crossFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
I've never used CSS animations before so I'm a bit confused. Only the "bottom" image is being shown and nothing else happens.
What is going wrong?
Here is an example with 10s delay and 1s animation duration.
#container {
float: right;
height: 246px;
position: relative;
width: 230px;
}
#container img {
height: 246px;
width: 230px;
left: 0;
opacity: 0;
position: absolute;
}
#container img.bottom {
opacity: 1;
}
#container img.top {
-webkit-animation: crossFade 11s infinite;
animation: crossFade 11s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
#-webkit-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="container">
<img class="bottom" src="https://dummyimage.com/200x200/404/fff">
<img class="top" src="https://dummyimage.com/200x200/101/fff">
</div>