Html - Cross Fade Animation using CSS and javascript

AkbarBasha
February 8, 2024
230 views
0 votes
2 Answers

I am trying to achieve the same kind of animation using html and css.

Below gif is my expected output to achieve

This is what i tried but unable to meet the same expected output… Can you please suggest how to implement the similar animation? or solition for that?

.container {
  position: relative;
  width: 800px;
  /* Adjust this to match your image width */
  height: 400px;
  /* Adjust this to match your image height */
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 100%;
  /* Start the overlay off-screen to the right */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  animation: slide 5s linear forwards;
}

@keyframes slide {
  0% {
    left: 100%;
    /* Start off-screen to the right */
  }
  100% {
    left: -100%;
    /* Slide to the left */
  }
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  /* Adjust as needed */
  object-fit: cover;
  /* Adjust as needed */
}

<div class="container">
  <div class="overlay"></div>
  <img src="test.png" alt="Input 1">
</div>

Answers

The commended way to do this is by making use of background-size and background-position.

Here’s a fun tool that allows you to create snippets and get a sense of what’s happening under the hood: https://www.gradient-animator.com/

 .container {
    width: 300px;
    height: 150px;
    border: 3px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(270deg, #eee909, #0969ee);
    background-size: 400% 400%;
    animation: slide 30s ease infinite;
 }

 .banner {
    font-weight: bold;
    color: white;
    background-color: gray;
    padding: 0.5em 1.5em;
    border: 1px solid black;
 }

 @keyframes slide {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
 }

  <div class="container">
    <div class="banner">some text</div>
  </div>

I figured out how to get the desired result by extending the .overlay box and only applying the gradient to the first part. Your updated .overlay CSS should look like this:

.overlay {
  position: absolute;
  top: 0;
  left: 100%;
  /* Start the overlay off-screen to the right */
  width: 200%; // Make it twice as wide
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); // Add another gradient to make the box light dark dark
  animation: slide 5s linear forwards;
}

No other code should need to be changed.

This works because your animation only moves the gradient 100% to the left, so if you make the overlay twice that, it will move the gradient off the screen and still have only the dark background left over.

Your final code should look like this:

.container {
  position: relative;
  width: 800px;
  /* Adjust this to match your image width */
  height: 400px;
  /* Adjust this to match your image height */
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 100%;
  /* Start the overlay off-screen to the right */
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0,0,0,1));
  animation: slide 5s linear forwards;
}

@keyframes slide {
  0% {
    left: 100%;
    /* Start off-screen to the right */

  }
  100% {
    left: -100%;
    /* Slide to the left */
  }
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  /* Adjust as needed */
  object-fit: cover;
  /* Adjust as needed */
}

<div class="container">
  <div class="overlay"></div>
  <img src="test.png" alt="Input 1">
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Cross Fade Animation using CSS and javascript

Answers