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;
}
I've encountered an interesting challenge while working on a web project and would love some advice on how to tackle it: Within a database, I have a collection of images that I want to display in a grid format. The twist is that higher ranked images ...
Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...
When visiting the website YouTube, you may notice that their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been attempting to achieve this effect on my own div, but currently, the scrollbar only appears once I start scrol ...
Having trouble aligning certain items. In thisFiddle, I have two options: Option1 and Option2. I want to align the toggle switches with the ones in the first two rows. Specifically, I want the toggle switches to be in the second column of the table and t ...
I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...
I'm encountering an issue with setting the readonly attribute on textareas. I am using JQuery to apply the attribute, as shown here: $("#mytextarea").prop("readonly", true); For CSS styling: textarea { width: 400px; height: 400px; } textarea[readon ...
It's strange how this issue always occurs when using floats. This is what my div (samle) looks like: <div class="main> <div class="inn_div"> </div> </div> Here is my stylesheet: .main{ width:250px; border:1px ...
Is there a way to arrange four boxes inside a div so that they are positioned at the corners of the top-left, top-right, bottom-left, and bottom-right? And when you click on the box in the middle, a window opens with text. I'm looking for something s ...
My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...
After days of trying to solve a specific issue, I have realized that I cannot do it without some help. The task at hand is to enable the functionality of clicking on a table row to reveal more details, but in my case, these additional details are presented ...
Here is a code snippet that functions correctly in IE9 and later versions, but encounters issues in IE8: <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" id="div1"> <div class="panel panel-default" style="" id="panel1"> ...
I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue. I am in the process of creating a marquee that displays images within a fixed-width div. The number of images exceeds the capacity of the div, ...
I am looking to incorporate SCSS styles on the body by default, and then reapply them specifically to the P and LI tags (since I do not have complete control over the site and want to prevent plugins from interfering with my p's and li's). To ac ...
Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN: loginForm.js: import React from "react"; import { Button, Form, Header } from "semantic-ui-react"; import styles f ...
I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...
I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...
How can I highlight the span(class="tiny") element individually when its containing div is active or clicked? I have attempted to highlight the tiny span element without success, as only the entire div was highlighted. Here's the code snippet I' ...
I have been attempting to eliminate the border color surrounding options in a select box from Bootstrap Multiselect. Unfortunately, I am unable to identify the specific class responsible for adding the blue color around the option borders. This border app ...
Welcome, internet friends! If anyone out there has a moment to spare and is familiar with Semantic UI, I could really use some assistance... Currently, I am working on a form that looks great on larger screens like this: https://i.stack.imgur.com/cafc5.j ...
I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...