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

Creating HTML code that is optimized for mobile devices

My front end design is based on the CSS stylesheet from W3Schools.com, which includes a class property called "w3-rightbar" for adding a thick right border. However, I encountered an issue where I needed to hide this "w3-rightbar" specifically on mobile vi ...

htmlcssw3-css

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

javascriptcssangularjsseleniumangular-material

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

Two elements are placed side by side on a webpage. One element, with a fixed size of 100vh, is named .hero-half, while the other element, holding text of varying lengths, is fluid and labeled as .project-details. When the text container extends beyond the ...

javascriptjquerycssflickerouterheight

What is a CSS image flush?

Want some help with a website I'm working on? Check it out here: I managed to align the product image with the green section using a negative padding-bottom value like this: img.img-with-animation { opacity: 0; position: relative; padding-bottom: -7 ...

css

Height of VUE Carousel 3D Slider dimension

I recently integrated the VUE Carousel 3D Slider on my website, but I'm facing an issue with controlling the height of the slides. There seems to be excessive space below the slider because the slides are unnecessarily tall. I attempted to adjust the ...

javascriptcssvue.jsheight

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

javascriptcssreactjstypescriptstyled-components

How can I update an image source using JavaScript in a Django project?

Is it possible to dynamically change the image src using onclick without relying on hard paths or Django template tags? I have concerns that this may not be best practice. How can I implement a method to inject/change the ""{% static 'indv_proj&b ...

javascripthtmldjango

What are some effective ways of using the parent, before, and children selectors?

<table> <tr><td><input type="text" value="123"></td><td><input class="here" type="text"></td></tr> <tr><td><input type="text" value="333"></td><td><input class=" ...

javascriptjqueryhtml

ISP Blocks Flash Access

My innovative set of flash games has been adopted by numerous schools throughout the UK. However, I recently encountered an issue where one school was unable to load these Flash games... After reaching out to the school's Internet Service Provider (S ...

phpmysqlhtmlflash

Text in SVG file misaligned at the edge

After creating an SVG with a base64 background image and two text areas for top and bottom texts, I encountered an issue on Internet Explorer and Edge. The problem is that the bottom text is aligned to the left instead of the center, and its position is in ...

javascripthtmlcsssvgmicrosoft-edge

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

javascripthtmlcssfontsfont-size

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

csslaravelvue.js

Having trouble parsing emails in Python using the "imaplib" library, dealing with HTML line character limits, and handling extra non-Unicode characters

In my Python 3 project, I am working on validating emails that are sent to my inbox. I am using imaplib library to achieve this task. While I have successfully retrieved the email content, the mail appears to be unreadable and somewhat corrupted (reference ...

pythonhtmlemail

Transitioning from Bootstrap 4 to Bootstrap 5 raises concerns about container compatibility

Interested in transitioning from Bootstrap 4 to Bootstrap 5. Noticed that the container max-width appears different on the default setting. Any insight on why this is and how it can be adjusted to resemble Bootstrap 4? I'm a beginner with Bootstrap, s ...

csstwitter-bootstrapmedia-queriesbootstrap-5

Ensure text within list items is positioned properly and not obscured by any decorative elements

I'm struggling to create top-bottom borders for list items with customized decorations. The text of the element should not be hidden under the decoration even if it's too long. Any ideas on how to achieve this? div { width: 20%; } ul ...

htmlcss

Showcasing a checkbox with the chosen item marked as selected

My goal is to allow users to select hobbies from a checklist provided. The chosen hobbies should then be added to the user table. I want the checkboxes to display the user's current hobbies - checked if selected, unchecked if not. Users should be able ...

pythonhtmlgoogle-app-engine

Setting the color of an element using CSS based on another element's style

I currently have several html elements embedded within my webpage, such as: <section id="top-bar"> <!-- html content --> </section> <section id="header"> <!-- html content --> </section> <div id="left"> &l ...

javascriptjqueryhtmlcssjoomla3.0

How to Generate HTML Reports Using JBoss?

Is there a convenient and efficient way to generate .html reports for JBoss applications that is not time-consuming? I have a database containing entities that I need to display in multiple tables. The report should include links to navigate between secti ...

javahtmljbossreport

Manipulating the distinct look of the final element in an *ngFor loop

I am trying to enhance the appearance of the last line of controls generated by an iterator by making it disabled and somewhat invisible. Currently, my code is functioning well, as shown below. <div *ngFor="let item of data; let last = last;"> &l ...

htmlcssangular

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

javascripthtmlcss