My goal with CSS is to create a transition effect with a delay that behaves differently when entering and exiting. Specifically, I want a 1 second delay when an element enters, but no delay (0 seconds) when it exits.
transition: width 0.3s ease-in 1s;
transition: width 0.3s ease-out 0s;
To see the code in action, check out this jsFiddle
Make sure to include the delay within your .active block to ensure that the element only transitions to green when it has the active class:
.demo {
padding: 15px;
background-color: #cccccc;
transition: background-color 0.7s ease-in-out 0s;
}
.demo.active {
background-color: navy;
transition: background-color 0.5s ease-in 1s;
}
To make your code more concise and easier to maintain, consider setting the transition-delay property instead of completely rewriting the entire transition:
.sample {
padding: 20px;
background-color: #efefef;
transition: background-color 0.3s ease-out 0s;
}
.sample.active {
background-color: green;
transition-delay: 1s;
}
For more information, refer to the documentation: https://developer.mozilla.org/en/docs/Web/CSS/transition
My personal solution was this:
.example {
padding: 20px;
background-color: #efefef;
transition: background-color 0.3s ease-in 0s;
}
.example.active {
background-color: green;
transition-delay: 1s;
}
An !important declaration is unnecessary because the cascade will automatically prioritize the later rule when a property is overwritten.
You don't have to rewrite the entire transition rule if you specifically want to keep the same transition with a different delay, rather than a completely different transition.
The reason for having the default delay as 0s is that when you remove the .active class, both its color and transition delay are no longer applied, so the delay specified in the .example class takes effect.
Give this a shot
CSS Code Snippet
.example {
padding: 20px;
background-color: #efefef;
-webkit-transition: background-color 0.3s ease-out 0s;
transition: background-color 0.3s ease-out 0s;
}
.example.active {
background-color: green;
-webkit-transition: background-color 0.3s ease-in 1s !important;
transition: background-color 0.3s ease-in 1s !important;
}
Currently, I am utilizing Nextjs and including the flaticon css in _app.js as follows: import '../public/assets/css/flaticon.css'; In the upcoming section, an error is being encountered: @font-face { font-family: 'Flaticon'; src: ...
Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...
Looking to create a box that adjusts its size based on content and center it without resorting to using tables for layout or setting fixed sizes. How can this be achieved while keeping the markup clean? I've almost got it, but the form fields are not ...
Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...
I have created a series of divs structured like this: <div id="body_container"> <div id="top_body"> </div> <div id="bottom_body"> </div> </div> Additionally, I have implemented the following funct ...
Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...
I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...
I am encountering an issue with my HTML code: <div class="a"><font size="40"><font color="black">A</font></font></div> No matter what I try, I cannot seem to increase the font-size. Even adjusting the value in the co ...
I am attempting to keep the navbar at the top by setting a fixed position with 'top: 0' on scroll for navbar-default, and return the navbar to its original position when scrolling up (to top 300). Below is my code: var height = jQuery('.n ...
Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far: <%= form_tag :action => 'create' do %> <p><label for = "name">Name</label>: <%= text_field ...
Issue or Inquiry I am seeking a way to disable actual scrolling on an element while still utilizing a scrollbar for convenience (avoiding the need for manual JavaScript implementations instead of relying on browser functions). If anyone has an improved s ...
While working on customizing the styles of radio buttons in a form, I encountered an issue where disabled radio buttons appeared selected even though they were supposed to show as disabled. Here is the code snippet that I used: input ::-ms-clear { ...
I've set up the HTML and JS functionality for the cart, but I'm facing an issue where the JS doesn't render the cart items when the shop item is clicked. The styling in my HTML is done using Tailwind. If anyone could provide some assistance ...
Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...
Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...
Here is a React component snippet: const [show, setshow] = useState(false); const handleShow = () => { setshow(!show); }; Accompanied by the following CSS styles: .show { display: block; } .dropdown_content { padding: 3px; display: none; po ...
Welcome to the community! My project involves extracting data from a website containing information on various chemical substances and converting it into a PDF while preserving the original HTML formatting, including CSS styles. For example, here is a li ...
I am relatively new to the world of HTML and CSS. I have successfully created several tables, but now I am struggling to display them all on a single line within a designated box. Despite my best efforts, I have not been able to achieve the desired result. ...
I'm currently developing a new open-source alternative to Plex and I am facing some challenges with the in-browser video player. My goal is to have the video player maximize its size within the window during playback, similar to what Chrome and Netfli ...
In this codesandbox example, I have successfully set the grid container height to full using 100vh. However, there is an issue with a margin of 8px being added by the user agent to the body element, and I'm struggling to find a solution to remove it. ...