Animate photos with identical class names individually using CSS

Check out this snippet:

<img class='img-logo' src={logo} alt="Logo" />
<img class='img-logo' src={logo} alt="Logo" />
<img class='img-logo' src={logo} alt="Logo" />
<img class='img-logo' src={logo} alt="Logo" />

Here's the corresponding styling:

.img-logo{
  position: absolute;
  top:4% ;left: 60%;
  height: 80px;
  width: 80px;
  animation-name:move_up;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}


@keyframes move_up {
  from{top: 38%;}
    to{top:4%}
}

Is there a way to animate them independently, one after the other just by using css and html?

htmlcss

Answer №1

Figured it out, here is the solution:

.img-logo:nth-child(2) {
  height: 180px;
  width: 180px;
  animation-duration: 10s;
 }
.img-logo:nth-child(3) {
  height: 20px;
  width: 20px;
  left: 30%;
  animation-duration: 3s;
}
@keyframes move_up {
  from{top: 38%;}
    to{top:4%}
}

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

Updating JQuery function after window is resized

click here Currently, I am using slick-slider to showcase content in 3 columns by utilizing flexbox. The aim is to have the slider activated only on mobile view. This means that when the screen size shrinks down to mobile view, the 3 column flexbox transf ...

javascriptjqueryhtmlcss

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

I need assistance with passing a variable called snAvatarSnuid within the img src tag, specifically after facebook.com/ and before /picture as shown below: <img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`> Note: 1) The ht ...

javascripthtmlvue.jsvuejs2web-frontend

Tips for spinning HTML5 Canvas's background image and adjusting the zoom with a slider

As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...

jquerycsshtml5-canvas

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Hey there, currently creating my website and need some assistance. I'm looking to display the date and time in different sections of the page. Having some trouble with getting Indian time to work properly using PHP. If you could help me out with Ja ...

javascriptphphtml

Having trouble getting Javascript to reveal hidden elements based on their class

I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure ...

javascripthtmlcssdom

Choose the heading element based on its class

I am trying to target a specific element by its class and store it in a variable, but I specifically need this element to be a heading element. To clarify: at any given time, there are always exactly 3 elements with this particular class on my page: an < ...

javascriptjqueryhtmldom

Ensure that HTML5 form fields are validated dynamically to make them mandatory

I have a form created using Bootstrap that contains several fields. By default, the first and second fields are required. Now, if the third field is filled out, the fourth field becomes mandatory. Similarly, if the fourth field is filled out, the third fi ...

jqueryhtmlvalidationdynamic

Insert placeholder text without access to the input field

Is it possible to activate a placeholder in a component that is outside of the current context? For example: <foreign-component [config]="someConfig" placeholder="somePlaceholder"></foreign-component> The <foreign-compo ...

cssangular

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

javascripthtmlcss

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango

What is the procedure for altering a particular element using ajax technology?

I have an AJAX request that updates the user information. I need to retrieve a specific value from the response and update the content of a specific element. For example, here is the element that needs to be changed: <div id="changeMe"><!-- New ...

javascriptjqueryhtmlajax

What is the best way to display two arrays next to each other in an Angular template?

bolded text I am struggling to display two arrays side by side in an angular template. I attempted to use ngFor inside a div and span but the result was not as expected. A=[1,2,3,4] B=[A,B,C,D] Current Outcome using ngFor with div and span : Using Div : ...

javascripthtmlcssarraysangular

What methods can be used to stop HTML5 audio from pre-downloading or streaming upon loading?

I am experiencing slow load times on my single page website that features a variety of HTML5 audio players. The issue seems to stem from certain browsers predownloading the content (mp3 and ogg). Internet Explorer Google Chrome Firefox Safari (probably Op ...

performancehtmlaudioaudio-streaming

How can I adjust the vertical position of Material-UI Popper element using the popper.js library?

https://i.stack.imgur.com/ZUYa4.png Utilizing a material-ui (v 4.9.5) Popper for a pop-out menu similar to the one shown above has been my recent project. The anchorElement is set as the chosen ListItem on the left side. My goal is to have the Popper alig ...

javascriptcssreactjsmaterial-uipopper.js

Difficulty viewing image in Firefox using HTML <img> tag

I'm encountering an issue with rendering an img tag in an HTML page. The img source is a file located on a remote server. Surprisingly, when attempting to display the image in Firefox using: file://///server/folder1/folder2/name.jpg it shows up prop ...

htmlimage

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

phpcsswordpress

Creating a flexible grid layout in CSS without relying on any pre-made frameworks

Suppose I am working with the following HTML structure <div class="option"> <input type="checkbox" /> <label>Checkbox</label> </div> <div class="option"> <input type="checkbox" /> <label>Chec ...

htmlcss

Fixed Positioning Div to Stay at the Top while Scrolling

Currently, I have successfully implemented the functionality to stick the div to the top once it scrolls down by 320px. However, I am curious if there is an alternative approach to achieving this effect. Below is the code snippet I am using: jQuery(functi ...

javascriptjquerycsshtml

What is the best way to store font size and background color settings in local storage?

After following the solution provided for a similar issue on SO, I am facing a problem where no changes are reflected when using the select box or color picker to modify the font size or background color. I have commented out the lines that were added in a ...

javascriptjqueryhtmllocal-storage