Hide the element once the CSS animation has finished

I have successfully implemented an animation using pure CSS that starts on load. However, I am facing an issue with both opacity and visibility as the div continues to take up space even when hidden.

Question

Is there a way to make the div disappear completely like display: none after the animation is completed?

Notes

  • I am looking for a pure CSS solution and would like to avoid any hacky fixes.
  • While I have come across similar questions, I have not found a satisfactory answer for this specific problem.
  • I decided to use animation instead of transition because it triggers on load.

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  padding: 1rem;
}

@keyframes autohide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

cssanimationtimecss-animationsdisplay

Answer №1

To create this visual effect, you can utilize the height property in your CSS:

@keyframes hideAnimation {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  99% {
    height: auto;
    padding: 1rem;
  }
  100% {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}

The height remains as auto up until the animation reaches 99%, at which point it changes to 0 to complete the effect.

Answer №2

To eliminate any padding and adjust the font size, simply set both properties to zero in the final keyframe.

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  padding: 1rem;
}

@keyframes autohide {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  95% {  
    opacity: 0;
    padding: 1rem;
    font-size: inherit;
  }
  100% {
    padding: 0;
    font-size: 0;
    opacity: 0;
  }
}
<div class="message success">
  Success!
</div>

The content below is intended to move up once the animation is complete.

Answer №3

Here is the solution that should meet your requirements.

Setting the height to 0 in conjunction with transition produces the desired effect.

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  transition: height 2s ease;
}

@keyframes autohide {
  0% {
    opacity: 1;
    height: auto;
  }
  90% {
    opacity: 1;
    height: auto;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}
<div class="message success">
  Success!
</div>

The text below should move up once the animation is complete.

Feel free to customize the transition to suit your needs.

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

Placing an image at the forefront of all elements

Recently, I created a horizontal opt-in bar for my Newsletter on my website. Instead of the traditional submit button, I decided to use an image by incorporating some CSS: #mc_embed_signup input.button { background: url(http://urltotheimg.com/image.jpg); ...

htmlcssforms

Implementing a jQuery function to trigger window resize on window load

I'm facing an issue with my resize function where the contents within a window change when it reaches a certain width. I'm trying to achieve this same effect on window load but haven't been successful so far. Here's what I've attem ...

jquerycss

How can I design a trapezoid with see-through borders and background?

Using various CSS border tricks, it's possible to create a trapezoid shape. Additionally, setting the border-color to rgba(r,g,b,a) can make it transparent. However, is there a way to create a trapezoid with both transparent borders and background? ...

javascripthtmlcsscss-shapes

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate

A guide to modifying the color of the Menu component in material-ui

Currently, I am utilizing the Menu component from material-ui and facing an issue while trying to modify the background color. The problem arises when I attempt to apply a color to the Menu, as it ends up altering the entire page's background once the ...

javascripthtmlcssreactjsmaterial-ui

Adjusting the size and positioning of an image with CSS

Here is my situation: I am working with an image that is 1900 x 1600 pixels in size. I also have a div that is sized at 200 x 150 pixels. To adjust the image size, I used the following CSS: max-width:300px; max-height:300px; The height will be adjuste ...

htmlcss

What is the best way to switch back and forth between two div elements?

I've been attempting to switch between displaying div .cam1 and div .cam2, however, I can't seem to get it to work. Here's the code snippet in question: HTML: <div class="cam1"></div> <div class="cam2"></div> CS ...

javascriptjqueryhtmlcss

JQuery requests functioning flawlessly on one system while encountering issues on other systems

I've encountered an issue with the code on my admin page. It used to work perfectly fine on my system, but now it seems to have stopped functioning. My client urgently needs to update this page, however, when I attempt to run it, the JQuery requests a ...

javascriptjqueryhtmlcss

The Bootstraps CSS style doesn't seem to be working properly or being overridden within an Angular

I have seen similar questions asked before, but none of the solutions provided have fixed my issue. It appears that the styles are being applied initially but then overridden by something else, and I am unable to identify what is causing this. The only r ...

cssangularbootstrap-4stylesheetangular8

Ever since I switched to a different monitor, my Javascript has suddenly stopped functioning

I'm encountering an issue where my JS stops working every time I switch displays within a single HTML file. I've attempted to replace the HTML onclick call with a JavaScript function, but the problem persists. Update: Apologies for the unclear e ...

javascripthtmlcss

Adjust the button's color even after it has been clicked

My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and ...

javascriptjqueryhtmlcss

How much does it typically cost to implement external libraries into a project?

Here are some of the most commonly used front-end web development libraries: jquery-min.js (95.9 kB) angular.min.js (108.0 kB) bootstrap.min.css (113.5 kB) bootstrap-theme.min.css (19.8 kB) bootstrap-fonts (185.7 kB) bootstrap.min.js (35.6 kB) All in al ...

javascriptjquerycssangularjstwitter-bootstrap

What is the best way to use ajax to load a particular div or class from a file?

In my main.html file, there are several divs each with 2 classes. The first is their specific class and the second is a class called menu-item, which determines if an event will be triggered when clicked. For example: <div id="load-here"> </div ...

javascriptjquerycssajaxweb

After applying the rotateY function, the z-index appears to be malfunctioning

My current project involves creating a page flip effect, which requires two overlapping div elements. Initially, both divs are side by side with the second div having a -webkit-translateY(180deg) property applied to it. The first div has a z-index of 2, wh ...

htmlcss

Challenges with implementing CSS transitions

I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues. Initially, I believed Opera had transition support starting from ...

cssoperacss-transitions

Styling images with text alignment in CSS

I'm trying to figure out how to align an image to the left, some text to the top right, and some text to the bottom right. The parent div contains a background image. <div id="parent" style="background: url(bg.jpg) repeat-x left top"> <i ...

htmlcsscss-float

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

I have come across some solutions, but I am struggling to incorporate them into my code as some require elements that are not compatible with my project. Let's get to the question: I need help making an existing CSS drop-down menu accessible for key ...

htmlcssdrop-down-menuaccessibilitykeyboard-navigation

Implementing the disabled style for an ASP.net dropdownlist

Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...

cssasp.netwebforms

Tips for optimizing Slider Code to showcase an expanded selection of slides

I am currently troubleshooting a slider code on my ASP.NET website. After examining the HTML, JS, and CSS from the page theme, I noticed that only two slides are being displayed. However, when attempting to add a new slider HTML and adjusting the CSS for t ...

javascriptjqueryhtmlcss

Using a background image in CSS

I'm having an issue with this code. It doesn't seem to be displaying anything on the screen: <!DOCTYPE HTML> <head> <title> CSS(lab2) </title> <meta charset="UTF-8"> <style type = "text/css"> ...

htmlcss