Delaying the animation of slider elements

I am trying to create an image slider with texts and a button that slide up. However, I want each element to appear with a delay, but it's not working as expected. Currently, all elements load at once before the animation starts.

To view my code, click here.

@keyframes slide-up {
  from {
    padding-top: 100px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
  .slide-heading {
    font-size: 50px;
    font-weight: 900;
    margin: 0 0 30px 0;
    width: 50%;
    animation: slide-up 1s;
    animation-iteration-count: 1;
    animation-delay: 1s;
  }
  .slide-text {
    line-height: 1.75;
    font-size: 13px;
    font-weight: 300;
    width: 50%;
    margin: 0 0 60px 0;
    animation: slide-up 1s;
    animation-iteration-count: 1;
    animation-delay: 2s;
  }
  .slide-btn {
    animation: slide-up 1s;
    animation-iteration-count: 1;
    animation-delay: 3s;
  }
}
<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

cssanimationdelay

Answer №1

Include animation-fill-mode: backwards; in your CSS

To ensure that CSS animations affect the element before the first keyframe is played and retain the style after the last keyframe, use the animation-fill-mode property.

When set to 'backwards', the element will inherit the style values from the first keyframe (depending on animation-direction) and maintain this during the animation-delay period.

More information here

Give this a try:

@keyframes slide-up {
  from {
    padding-top: 100px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
  .slide-heading {
    font-size: 50px;
    font-weight: 900;
    margin: 0 0 30px 0;
    width: 50%;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 1s;
  }
  .slide-text {
    line-height: 1.75;
    font-size: 13px;
    font-weight: 300;
    width: 50%;
    margin: 0 0 60px 0;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 2s;
  }
  .slide-btn {
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 3s;
  }
}

I hope you find this useful!

Answer №2

One issue with your animation is the padding, as it takes space from the preceding element. To address this, you can use the translate property to animate each text individually without interfering with one another. Here's an example:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

     .slide-heading {
        font-size: 50px;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        margin: 100px 0 30px 0;
        width: 75%;
        animation: slide-up 2s;
        animation-iteration-count: 1;
        animation-delay: 1s;
      }
      .slide-text {
        line-height: 1.75;
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        font-weight: 300;
        width: 60%;
        margin: 0 0 60px 0;
        animation: slide-up 5s;
        animation-iteration-count: 1;
        animation-delay: 1s
      }
      .slide-btn {
        font-family: 'Roboto', sans-serif;
        animation: slide-up 5s;
        animation-iteration-count: 1;
        animation-delay: 1s;
      }
@keyframes slide-up {
  from {
      transform: translateY(100px);
      opacity: 0;
  }
  to {
    transform: translateY(0);
      opacity: 1;
  }
}

<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

This solution has been tested and works effectively. Hopefully, it resolves your issue.

Answer №3

Appreciate the helpful suggestions from @Farhan Ali and @mkasp98


@keyframes slide-up {
  from {
      transform: translateY(100px);
      opacity: 0;
  }
  to {
    transform: translateY(0);
      opacity: 1;
  }
}
.slide-heading {
    font-size: 50px;
    font-weight: 900;
    margin: 0 0 30px 0;
    width: 50%;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 1s;
  }
.slide-text {
    line-height: 1.75;
    font-size: 13px;
    font-weight: 300;
    width: 50%;
    margin: 0 0 60px 0;
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 2s;
  }
.slide-btn {
    animation: slide-up 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 3s;
}



    <div class="slide-heading">Lorem Ipsum </div>
    <div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
    <div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></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

What is the best way to set a stationary background that scrolls on a responsive webpage?

I'm working on a responsive website with alternating sections featuring fixed background images where the content is meant to scroll over the image. However, I'm facing an issue on iOS where the background image zooms into a small section and sca ...

htmlioscssresponsive

What other choice do we have instead of using Angular's DomSanitizer for bypassing security and trusting HTML content?

Encountering XSS vulnerabilities while working with the IT security team during the build process. The (this.res) contains the code for embedding a video with script tags to play the video and its content. Any suggestions for an alternative solution are gr ...

javascriptcssangular

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

cssthree.js

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

javascripthtmlioscssmobile

"Using a triangular background shape in JavaScript instead of a traditional circular

I want to add a unique effect to my site inspired by the AnimatedHeaderBackgrounds demo available at this link. My twist on this effect involves using upward-moving triangles instead of circles. I've explored various resources, including Stack Overfl ...

javascripthtmlcss

Why does my HTML file consistently prioritize the final instance of my two external style sheets when loading?

I am looking to implement Media Queries for Responsive Web Design. My goal is to have two distinct CSS files based on the browser width being either higher or lower than 900px. Here is how I included the external stylesheets: <link id="Min900" rel="st ...

htmlcssmedia-queries

The hidden Material UI Collapse component is still occupying space on the page

Currently, I am implementing Material UI Collapse in my React project and encountering an issue where it is causing unnecessary space on the interface when hidden <Collapse in={false}> //content here </Collapse> Even though I have not a ...

cssmaterial-ui

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

htmlcss

Creating a Collage with Varied Image Sizes

Hey there, I'm trying to achieve something that seems simple, but I can't quite figure it out. What I want to do is query a table and display the results in two separate divs on my webpage. Here's an example of the HTML structure I have: &l ...

phphtmlmysqlcss

What is the best way to "fold" a div from the bottom upwards?

I'm looking to achieve a specific layout change when checking a checkbox, but I've run into an issue. Currently, the top portion of the content folds up while the bottom remains static. However, my goal is to have the opposite effect where the to ...

htmlcss

What is the best way to ensure the table header is aligned and maintained at the top of the table?

Currently tackling a virtualized table issue with an example. Any tips on aligning the table header correctly and making sure it stays at the top of the table when scrolling? Check out the code sandbox for reference:- https://codesandbox.io/s/material-ui ...

cssreactjsmaterial-ui

Nav bar breaching the Bootstrap threshold

I am new to using bootstrap and currently in the learning process. I am facing an issue with the navigation bar I created. All the contents are aligning to the right, but the search bar and tabs are breaking onto a new line. I have attempted various soluti ...

htmlcsstwitter-bootstrap

Can you provide guidance on centering a "frame" and aligning elements within it using CSS?

In creating my webpage, I am looking to design a virtual frame that is centered on the page. Within this frame, I want to be able to align various elements like images, text, and more using CSS properties. Let me explain with an example: I envision being ...

htmlcsswebalignment

Aligning text vertically centered within a div

Check out an example of my code here: Jsfiddle <div id="gameTimeBar-holder"> <div id="gameTimeBar"></div> <div class="progressBarText">Actions : 852 minutes</div> #gameTimeBar-holder{width:200px;height:15px;background:grey ...

htmlcss

Utilize custom scrollbar design exclusively for Windows operating system

My goal is to customize the scrollbar style of a div specifically for Windows systems. While most mobile devices have invisible scrollbars that I want to keep hidden, the aesthetics of Mac OS scrollbars are acceptable to me. What I really need is to make t ...

csscss-selectorsscrollbar

Using CSS flex with a column layout that does not expand to the full width of its parent

My vertical navigation bar includes the following list items: <ul class="nav"> <li> <div> <i class="fa fa-tachometer"></i> <a href="#" class="noselect">Dashboard</a> </div> ...

htmlcssflexbox

What is the best way to showcase JSON data while incorporating HTML tags in a React application?

My JSON data contains HTML tags interspersed within it and I have successfully fetched and displayed the data. See the code snippet below: componentDidMount() { this._callCake(); } _renderEachCake = () => { return ( <EachCake ...

javascripthtmlcssreactjs

Gradually Generated HTML website

Recently, I've been attempting to create a Sign-UP form using HTML and CSS in Notepad++, but I'm encountering a problem. Every time I try to test it on Chrome, the page loads incredibly slowly. I'm not sure if it's a configuration error ...

htmlcssbootstrap-4notepad++

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

https://i.sstatic.net/dj4zb.png I have this image that I need to divide into three sections with a legend at the top, similar to the image shown. So far, this is the code I have, but I'm struggling with creating the vertical line, adding space betwe ...

javascripthtmlcssformsbootstrap-4

Develop a unique splitter code that utilizes pure javascript and css, allowing users to drag and drop with precision

I am facing an issue with setting the cursor above my drop panel, as it results in a flicker effect. How can I set the cursor for my example to work properly? I have tried multiple different approaches to make this work. Although I am using the provided ...

javascriptcsshtmldrag-and-dropcursor