How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link

visit this webpage for the link I need

I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted to achieve this effect using CSS keyframes but have not been able to replicate it exactly.

  <div class="col-log">
             <img src="/img/tuvnord.png" class="resms1" alt="dd"> 
             <img src="/img/ce.png" class="resms2" alt="">
  </div>

I have div elements with col-log class like the example shown in the image link provided above.

.gelisme2 .resms1 {
    position: absolute;
    animation-name: pic1;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
.gelisme2 .resms2 {
    position: absolute;
    animation-name: pic2;
    animation-iteration-count: infinite;
    animation-duration: 3s;

}

@keyframes pic1 {
    0% {
        opacity: 0;
        transform: matrix(1, 0, 0, 1, 0, -50); 
    }

    100% {
        opacity: 0;
        transform: matrix(1, 0, 0, 1, 0, 50);
    }
}

@keyframes pic2 {
      0% {
          opacity: 0;
          transform: matrix(1, 0, 0, 1, 0, 50)
      }

      100% {
          opacity: 1;
          transform: matrix(1, 0, 0, 1, 0, 0)
      }
}

Answer №1

You have the ability to achieve the entire effect using CSS and keyframes. I have outlined the basics for you, but some fine-tuning will be needed with the timings. You can find everything necessary on this page:

https://www.w3schools.com/css/css3_animations.asp

In the following code snippet, the outer container (.flex-row) is configured with display:flex to display the immediate child containers (.flex-cell) next to each other. The flex-cell containers are then styled with display:block so that their contents do not appear next to each other. Inside each flex-cell, the logo divs are arranged in pairs, stacked vertically (this facilitates the slideUp / slideDown animations).

The snippet uses one single @keyframes definition for all top logo divs, and another @keyframes definition for all bottom logo divs. It might be more convenient to assign each logo div (dimg) its own keyframe definition. Choose whichever method works best for you. Focus on getting it functional first, then optimize it later – attempting both simultaneously might lead to confusion. Begin with just one logo pair, make sure they behave as desired, and then introduce additional flex-cells.

The timing in the provided example may not be perfect, but I am confident that you can adjust it to perfection. (Note that the timing of the first pair differs from the others. I experimented with timing to create a slight overlap between top and bottom changes, but ultimately decided you should manage well moving forward. This explains why the first pair appears noticeably different.)

.flex-row{display:flex;}
.flex-cell{display:block;padding:5px 20px;max-height:45px;border:1px solid #ddd;}
img{width:70px;height:40px;}
.twoA, .twoB, .twoC{opacity: 0;}
.oneA, .oneB, .oneC{opacity: 1;}

.oneA{
  transition: transform .3s;
  animation: doOne  6s linear 0s infinite forwards;
}
.oneB{
  transition: transform .3s;
  animation: doOne  6s linear .5s infinite forwards;
}
.oneC{
  transition: transform .3s;
  animation: doOne  6s linear 1s infinite forwards;
}
.twoA{
  transition: transform .3s;
  animation: doTwo  6s linear 2s infinite forwards;
}
.twoB{
  transition: transform .3s;
  animation: doTwo  6s linear 3.5s infinite forwards;
}
.twoC{
  transition: transform .3s;
  animation: doTwo  6s linear 4s infinite forwards;
}

@keyframes doOne {
   0% {opacity:0; transform: translate(0, -15px);}
   15%{opacity:0;transform: translate(0, -15px);}
   18%{opacity:1;transform: translate(0, 0px);}
   40%{opacity:1;transform: translate(0, 0px);}
   45%{opacity:1;transform: translate(0, 0px);}
   50%{opacity:0;transform: translate(0, 25px);}
  100%{opacity:0;transform: translate(0, 25px);}
}

@keyframes doTwo {
   0% {opacity:0; transform: translate(0, 0px);}
   15%{opacity:0;transform: translate(0, 0px);}
   18%{opacity:1;transform: translate(0, -40px);}
   40%{opacity:1;transform: translate(0, -40px);}
   45%{opacity:1;transform: translate(0, -40px);}
   50%{opacity:0;transform: translate(0, 0px);}
  100%{opacity:0;transform: translate(0, 0px);}
}
<div class="flex-row">
  <div class="flex-cell">
    <div class="dimg oneA"><img src="https://business.exetel.com.au/images/partners/Optus.svg" /></div>
    <div class="dimg twoA"><img src="https://business.exetel.com.au/images/partners/AAPT.svg" /></div>
  </div><!-- .flex-cell -->
  <div class="flex-cell">
    <div class="dimg oneB"><img src="https://business.exetel.com.au/images/partners/Megaport.svg" /></div>
    <div class="dimg twoB"><img src="https://business.exetel.com.au/images/partners/Cisco.svg" /></div>
  </div><!-- .flex-cell -->
  <div class="flex-cell">
    <div class="dimg oneC"><img src="https://business.exetel.com.au/images/partners/Cirrus.svg" /></div>
    <div class="dimg twoC"><img src="https://business.exetel.com.au/images/partners/Opticomm.svg" /></div>
  </div><!-- .flex-cell -->
</div>

Answer №2

If you're looking to pause one animation until another has finished, consider incorporating an "animation-delay" to the desired class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering content between HTML tags using Python Regular Expressions

Can someone help me with extracting the content between HTML tags shown here: <div class="td-wrap"> <a href="/universities/university-cambridge" class="uni-link">University of Cambridge </a> </div> ...

Obtain a Spotify Token and showcase information in next.js

This is a Simple Next.js component designed to display the currently playing song on Spotify. Context: Utilizing app Router Due to Spotify's token requirements necessitating a server-side call, the entire request is made to fetch the song from an ...

Embed one module within another module and utilize the controller from the embedded module

I am attempting to create a module and inject it into the main module. Then, I want to inject the controller into the injected module but am facing issues. In my index.html file: <html ng-app="MenuApp"> <head> </head> <body> <d ...

Creating an array upon clicking and dynamically changing its class using AngularJS

Currently, I am developing a scheduling application where there are 2 individuals enrolled for 11 different dates. The functionality I am working on involves allowing the user to click on a month, which will then be added to an array and highlighted. If t ...

AngularJS encountering unresponsive resources

When setting up my Angular App, I include various resources like this: angular.module('myApp', ['infinite-scroll', 'chieffancypants.loadingBar', 'ngResource']) Next, in the html file: <script type="text/javascr ...

Modify parameters variable when searching by utilizing bootgrid along with structured-filter

I have implemented both https://github.com/evoluteur/structured-filter and to develop an advanced search functionality using ajax/php. Initially, the code is functioning correctly and retrieves data from the php file. However, I am facing difficulties wh ...

Could you assist me in navigating the process of creating a dynamic 10x10 multiplication table using HTML and JavaScript? I'm eager to learn where to begin with this methodology

As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...

Troubleshooting event binding problems with jQuery

<div id="parent"> <div id="children"> </div> </div> If we attach the same events to both parent and children elements: $("#parent").live({ mouseenter : Infocus , mouseleave : Outfocus }); $("#childre ...

I have noticed that the display:none property for <span> elements does not seem to work in IE8 on some computers, although it does

<span id='x' style='display:none;'> <input type=button value='x'> </span> <span id='y' style='display:none;'> <input type=button value='y'> </span> Although th ...

Passing a variable via routes using Express

app.js var express = require('express'); var app = express(); var textVariable = "Hello World"; var homeRoute = require('./routes/index'); app.use('/', homeRoute); index.js var express = require('express'); var ...

Using ThreeJS to load and display several meshes from a .json 3D file

I downloaded a .json file from an online 3D editor and now I'm facing an issue while trying to load and create 20 instances of it, similar to this example. Sadly, my code seems to be flawed as all 20 instances are behaving as if they are the same obje ...

The difference between see-through shades and rgba(0,0,0,0)

What are the primary benefits of using: background-color: rgba(0,0,0,0); over: background-color: transparent; ? ...

Organized Styled-components

Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...

Exploring the power of Foundation For Apps and Angular by seamlessly displaying dynamic data sourced from

I'm currently working with Foundation for Apps, a framework that incorporates elements of AngularJS. My goal is to display the content from a local JSON file by accessing it through a controller and rendering the results as 'cards'. Addition ...

Failed to make a request to https://registry.npmjs.org/node-modules because of an error: error:0906D06C:PEM routines:PEM_read_bio:no start line

Encountering an issue while attempting to install a JS package. Despite conducting thorough research, I have not been able to resolve the error. Please help me identify where I am going wrong. npm ERR! request to https://registry.npmjs.org/node-modules ...

What is the best way to assign a value to a class variable within a method by referencing the 'this' keyword?

Is there a way to set the state of this Ionic react app when displaying the outcome of a reset service? I am facing challenges with using this.setState({resetSuccess}) within a method due to scope issues. (Details provided in comments) Here is the relevan ...

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

a guide on monitoring the status of a stripe transaction through a straightforward form and javascript

Currently, I am in the process of setting up Stripe checkout for my website. I have successfully implemented the payment form, but now I need to figure out how to redirect the user to another page after a successful payment. Below is the JavaScript code th ...

Sticky sidebar that adjusts to viewport size in a responsive layout

When designing a CSS fluid layout, most divs utilize percentages to adjust based on the viewport size. However, I have a specific scenario where I need my sidebar to maintain a fixed position. For instance: <aside style="width:25%; float:left; positio ...

How to retrieve an unknown JSON key in Vue.js when using v-for loop?

I have developed a code analysis tool and I am looking to display my JSON data in a Vue table. The challenge is that I need the JSON key, which represents the package/file name of the directory whose data I want to showcase. Below is an excerpt of the JSO ...