Animating divs one by one using CSS3 with delays

I am experimenting with animating three separate divs one by one, each moving down 50px as a test.

Here is the SCSS code I am using:

    .action {
        margin: 20px 0;
        text-align: center;
        transform: translate(0,0);
        transition: all .5s;
        &.animate {
            transform: translate(0, 50px);
        }
        &.animate-delay-1 {animation-delay: 1s;}
        &.animate-delay-2 {animation-delay: 2s;}
    }

And here is the corresponding HTML:

            <div class="actions">
                <div class="action animate animate-delay-0">
                    <i class="fa fa-envelope-o"></i>
                    <span class="person"></span> receives her questions by email
                </div>
                <div class="action animate animate-delay-1">
                    <span class="person"></span> fills in the answers to her questions
                </div>
                <div class="action animate animate-delay-2">
                    <span class="person"></span> receives the results by email
                </div>
           </div>

The animations are not behaving as expected and seem to be occurring simultaneously without any delay. Any suggestions or insights on what might be causing this issue? Thank you for your help!

Answer №1

If you're looking to add delays to your transitions, consider using the transition-delay property. I recently created a SASS mixin that could come in handy:

@mixin delay-transition ($element, $time, $number, $offset: 0) {
    $sequence: '';

    @for $i from 1 through $number {
        $sequence: $sequence + ' + ' + $element;

        & #{$sequence} {
            transition-delay: #{$i * $time + $offset}s;
        }
    }
}

To implement the mixin, you can do the following:

div.action {
    @include delay-transition(div.action, .05, 40);
}

Addendum: This will generate output similar to this:

div.action {transition-delay: 0}
div.action + div.action {transition-delay: 0.5s}
div.action + div.action + div.action {transition-delay: 1s}
div.action + div.action + div.action + div.action {transition-delay: 1.5s}

Answer №2

You have neglected to utilize the class animate-delay-1

Consider using this structure:

    <div class="actions">
            <div class="action">
                <i class="fa fa-envelope-o"></i>
                <span class="person"></span> receives her questions by email
            </div>
            <div class="action animate-delay-1">
                <span class="person"></span> fills in the answers to her questions
            </div>
            <div class="action animate-delay-2">
                <span class="person"></span> receives the results by email
            </div>
       </div>

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

Create a variety of charts using the same data object in Highcharts

Is it possible to display two (or three) different charts on the same page using Highcharts without creating separate div elements and only utilizing one object? I have created a screenshot to illustrate my question: You can view the code example on JSFi ...

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

In my simple HTML table, I am trying to align the text in all columns to the right side in the second row. After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The widt ...

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: https://i.sstatic.net/YN7Iu.png The HTML ...

Can you explain the distinction between using single and double quotes in my JavaScript and CSS code?

Is there a significant distinction between using single or double quotes in JS and CSS? Does it depend on personal preference, or are there certain instances where one is preferred over the other? In W3Schools, they employ single quotes for url('&apo ...

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

What is the proper location to insert CSS within Laravel?

What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...

jQuery - restrict input field based on the value of a different selected field

Could anyone recommend a jQuery plugin that can achieve the following functionality? For example: <label><input type="checkbox" depends_on="foo=5" name="boo" ... /> Check </label> <select name="foo" ... > <option value="5" se ...

What is the reason behind jQuery onePageNav adding the 'current' class to each 'li' element?

When the jQuery function is applied to the .navbar.navbar-fixed-top .navbar-nav, it triggers an event that changes the current class to 'active', disables hash change, sets scroll speed to 400 and applies a filter excluding elements with the &apo ...

Modify the text when clicked on, but do not change the span

I'm currently attempting to change the text within an anchor (<a href=>) element when another element is clicked. The structure of the HTML is as follows: <h1> <a href=""> replace this text <span class="breadcrumb" ...

Issues with autoplay not functioning in Chrome browser with Youtube iframe source

I have added an iframe code to my simple HTML page. I would like the video to autoplay when the page loads. It works perfectly in Firefox, but in Chrome, the autoplay feature does not work. Here is my code: <iframe width="420" height="345" src="https:/ ...

Images and text mix with query mobile in a spontaneous array

I am currently working on a piece of code that generates a random image when the initial screen image is clicked (taken from JavascriptSource): <script type="text/javascript"> <!-- Original: Nicholas Lupien--> <!-- Begin var rand1 = 0; var ...

What is the best way to create an oval-shaped background for a div element?

Can someone help me achieve an oval shape for my index page div? I tried using border-radius but the edges are too round for my liking. I am looking for a more specific result See the CSS code below for reference <div class="home-page"></div> ...

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...

"Enhance user experience with autofocusing on form fields within an overlay

Despite spending hours searching, I can't seem to figure out a seemingly simple task. I am trying to set autofocus on a form field within an overlay that opens when a button is clicked. The overlay is implemented using basic jQuery overlay code. $(f ...

The functionality of updating input values via jQuery AJAX in HTML response is currently not functioning as expected

Hello, I need some assistance. I'm encountering difficulty with jQuery in modifying HTML values that are dynamically inserted through an AJAX response. Here is the link to the JSFiddle. Below is the HTML on the page: <button id="test">test&l ...

"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned dur ...

Measuring the height of a div element using Vuejs

Let me explain my current situation: I am trying to determine the height of a DIV component in order to dynamically inform its child component about its size. I have been working on implementing manual loading mode, but I have encountered an issue where t ...

Arranging Divs next to each other, ensuring uniform column heights, within a ContentPlaceHolder in ASP.NET

I am attempting to create a layout with three columns. The left and right columns will each contain a button that should remain aligned with the outer border of the container. In the center column, there will be an asp:Table generated dynamically, ranging ...

"Carousel indicator navigation malfunctioning in bootstrap slider with unresponsive click behavior

I'm currently working on modifying the code below. I've managed to separate the indicators from the bootstrap carousel. Everything seems to be functioning well, except for one issue - when I click on the list of indicators, although the image cha ...