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

What is the best way to apply an outer border to a table using CKEDITOR?

Is there a way to only add an outer border to an HTML table in CKEDITOR? I've attempted to remove the inner borders using the advanced options in CKEDITOR, but it doesn't seem to be working. <table border="1" cellpadding="1" cellspacing="1" ...

htmlcss

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

javascriptjqueryhtmlcheckbox

A collection of items that mysteriously affix themselves to the top of the page as

Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...

phpjavascriptjqueryhtmlcss

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...

javascripthtmlcsslocationlocation-href

Steps for retrieving the attribute values of <i> tags enclosed within a designated <div> element

Currently, I am extracting data from a website where I encounter a recurring pattern with a varying number of values. For example, an instance of this pattern is shown below: <div class="lang"> <i class="flag fr" qtip-tooltip= ...

pythonhtmlseleniumweb-scrapingxpath

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

What is the best way to reset the 'aria-expanded' attribute to 'false' as I navigate to the following element?

My menu has 2 dropdown buttons, each with a default 'aria-expanded'=false value. The buttons also have the 'up' and 'down' classes to indicate when they are expanded or closed. The issue arises when I click on the first button ...

htmljquerywai-aria

What steps are involved in creating a circular shape on canvas?

I am trying to create a circular shape in the canvas using the code below. The code involves moving an object with keyboard keys, and I need help making the canvas shape into a circle without affecting the functionality of the code. I attempted to modify t ...

javascripthtmlcsscanvas

When a user clicks on an anchor tag, close the current window, open a new window, and pass the

I have a scenario where I have an anchor tag that triggers the opening of a window on click. In this newly opened window, there is a table with a column containing another anchor tag. Here is what I am trying to achieve: Code for the anchor tag: functio ...

javascriptphpjqueryhtml

Adjust the white background to match the gray background seamlessly

I'm in the process of developing a forum and encountering some challenges with CSS. My goal is to extend the white area all the way to the right edge of the gray background, leaving a gap of around 5px/10px. I've experimented with different CSS ...

htmlcss

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...

cssreactjstypescriptmaterial-ui

What are the permissible child elements for an <a> tag?

Lately, I've been focused on structuring HTML code and it got me thinking about which elements are actually allowed as children of an <a> element. Can you help clarify? ...

csshtml

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

htmlangulartypescript

Obtain consistent outcomes by entering identical data in both Ajax and PHP

My code takes a number input in a <textarea>, then uses AJAX to validate it randomly with PHP (using rand()). The validated number is returned along with the words correct or incorrect to a <div> in HTML. The issue is that if the same number i ...

phphtmljqueryajax

Choose the initial p tag that includes an image, based on the content of another div

I am trying to figure out how to manipulate the code on my website: <div class="the-post-thumbnail"> <img src="" alt="" width="" height="" /> </div> <div class="post-body"> <p><img src="" alt="" width="" height="" ...

javascriptjqueryhtmlcss

Changing the border color of a Bootstrap 5 button using custom CSS styling

I have been working on a page to control my amp using various JavaScript libraries. 1.) How can I change the blue border of a selected Bootstrap 5 button to a lighter green without using SCSS? Example: Repository (apologies for the mess, it's not t ...

cssbootstrap-5

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

javascriptcssdompseudo-element

What are the available choices for constructing HTML based on an ajax response?

Are there any alternatives or libraries available for constructing html from an ajax response? Currently, I am taking the json data received, creating the html as a string, and using a jQuery function to insert it into the DOM. However, I believe there mu ...

javascriptjqueryhtmlajaxjson

Jumping transitions in thumbnail images

Could you please visit I've noticed that when hovering over the thumbnails in the last column, the images jump a bit after transition, especially in Firefox. Do you have any suggestions on how to resolve this issue? ...

htmlcssresponsive-designcss-transitions