After a CSS animation, the Div element disappears from view

I recently implemented a CSS3 delayed animation on page load. Everything was working smoothly until I noticed that after the animation finishes, the DIV reverts back to visibility: hidden.

.content-left {
    margin-left: 100px;
    margin-top: 32px;
    position: absolute;
    z-index: 1; 
    visibility: hidden;
    -webkit-animation: fadein 1s 2s ease; /* Safari and Chrome */
    animation: fadein 1s 2s ease;
}

@keyframes fadein {
from { height: 0px; }
to   { height: 421px; visibility: visible;} }

@-webkit-keyframes fadein {
from { height: 0px; }
to   { height: 421px; visibility: visible;}}
htmlcsscss-animations

Answer №1

The reason for this occurrence is that once the animation finishes, it reverts back to its original style.

However, you have the option of instructing your animation to maintain the last frame even after it has completed playing by utilizing something known as Animation Fill Mode

animation-fill-mode: forwards; - will retain the final frame of the animation.
animation-fill-mode: backwards; - will retain the initial frame of the animation.

Another approach is to include forwards in your animation declaration:

-webkit-animation: fadein 1s 2s ease forwards; /* Specifically for Safari and Chrome */
animation: fadein 1s 2s ease forwards;

Answer №2

To prevent the animation from reverting back to its initial stage, use the animation-fill-mode: forwards property.

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

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

What specific element is being targeted when a directive injects a ViewContainerRef?

What specific element is associated with a ViewContainerRef when injected into a directive? Take this scenario, where we have the following template: template `<div><span vcdirective></span></div>` Now, if the constructor for the ...

htmlangulartypescript

What is the best way to transfer my saved bookmarks and import them into a database?

Over the years, I've amassed a large collection of bookmarks that I now want to organize in a searchable table with additional details like categories, types, and descriptions. My initial approach involved manually inputting them into a JSON file and ...

htmljsoncsvdatatablesbookmarks

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

Any ideas on how to successfully implement this CSS text-decoration override?

There are moments when I question my sanity, and today seems to be one of them. Despite what I thought was a straightforward CSS code, it's just not functioning properly. What could I possibly be overlooking? Here is the CSS snippet in question: ul ...

htmlcsstext-decorations

Navigate through the components of an array within HTML

I am a beginner in HTML and I need to customize a specific piece of code to suit my requirements. Here is the code snippet written in pseudo code: <app-myapp *ngIf="true" [exclude] = "[this.myUser.id]" ...

htmlarrays

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. Specifically, I included this property within the 'dat ...

javascriptcssreactjsantd

Resolving DOMException issue in Google Chrome: A Step-by-Step Guide

In my browser game, I am experiencing an issue with sound playback specifically in Google Chrome. Although the sound manager functions properly in other browsers, it returns a DOMException error after playing sounds in 50% of cases. I'm unsure what co ...

htmltypescriptgoogle-chrome

Tips for transferring a double value from HTML to PHP

I need assistance in transferring a Double value (for example, 10.9) from an HTML file to PHP. Below is the HTML code I'm working with: <form action="AddProduct.php" method="POST" target="_self"> <table> ...

phphtmlebay-api

Determine the height using jQuery before adding the class

I've been grappling with jQuery to accurately calculate the height of an element and then apply a specific CSS class to adjust its height. The issue I'm facing is that jQuery seems to be executing these calculations out of order, which is causing ...

jquerycss

Ways to eliminate the up and down arrow in the MUI number field

How can I remove the up and down arrow from the MUI number field? My current version is 5.3.0. Is it possible to achieve this using the sx prop? Learn more about the sx prop here <TextField sx={{...}} id="outlined-number" label="Nu ...

cssmaterial-ui

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

javascriptjqueryhtmljson

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

javascriptjqueryhtmlcss

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

Images in SCSS distorted due to styling issues

I am encountering an issue with a round image displaying properly on a browser, but appearing distorted after building the apk and running it on my android phone. The image's width is greater than its height. How can I ensure that it remains round? M ...

htmlcssionic-frameworksassscss-lint

What is the best way to create a dynamic textbox or label within a specific div class?

I need assistance with my dynamic asp.net page where I am generating labels and text boxes in a form. Is there a way to ensure that these elements are generated within a specific div class? Below are the relevant code snippets: for (int i = 0; i < cou ...

c#htmlcssasp.net

Access a SQL database to retrieve a data value and seamlessly integrate it into an HTML document with the help of node

I am new to web development and currently facing a challenge in displaying SQL content on an HTML page. My stack includes Node.js, Express, and SQLite3. I have a folder named public containing HTML, CSS, and JS files. The objective is to retrieve a varia ...

javascripthtmlnode.jsexpress

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

I'm dealing with an HTML code that can dynamically change table data based on user selection. Here's the snippet of my HTML code: Select an option: <select name='set' id="set" class="selectpicker" onchange='displayFields(this. ...

javascriptjqueryhtml