Transition must happen when we move from one value to another upon a event.
Here the visibility setting on an element:
.two {
background-color: #9fa8da;
position: absolute;
visibility: hidden;
transition: visibility 3ms ease-in;
}
Upon a button click, visibility is set to 'visible'
.two-show {
visibility: visible;
}
However there is no animation effect.
Plnkr here:
http://plnkr.co/edit/4Fhb1Uj744BRwCDhebOP?p=info
Try adding this to .two{}:
-webkit-transition: visibility 30ms ease-in, -webkit-transform 3s;
-moz-transition: visibility 30ms ease-in;
-o-transition: visibility 30ms ease-in;
I wonder if 3ms is to fast?
You can achieve the very same effect you want using the opacity property. Updated your plunker using this new approach. I also increased the transition time for the effect to be noticeable.
.two {
background-color: #9fa8da;
position: absolute;
opacity: 0;
transition: opacity 3s ease-in;
}
.two-show {
opacity: 1;
}
Related
I have a backdrop on my site that opens whenever it needs to. Modals, mobile nav etc.
I'd like to get the opacity of the backdrop to fade, however I can't get it to transition properly when the --open class is removed from the backdrop.
I've gone through a few iterations so any ideas on how to make it work AND be better css is appreciated.
Here's a demo demonstrating the ease effect occuring when --open is applied to the backdrop, but will not work when it is removed.
https://jsfiddle.net/p2yz0rvr/
For futures sake here's the code:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -9999999999;
opacity: 0;
text-align: center;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
background: #000;
transition: opacity 0.4s ease-out;
}
The problem is that you don't have a background set on the initial .backdrop state, the background is set on the element .backdrop--open.
Since you are only transitioning the opacity property, the transition doesn't occur when you remove the .backdrop--open class. Therefore you would need to move background to the initial .backdrop state in order for the transition to take place when removing the class.
Updated Example
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: 0;
text-align: center;
background: #000;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
transition: opacity 0.4s ease-out;
}
As an alternative, you could also keep your initial code and just transition the background property in addition to the opacity property (without having to change where the background is set).
Keep in mind that the z-index property can be transitioned, so depending on what you're trying to achieve you may only want to target those two properties rather than using all.
Updated Example
.backdrop {
/* ... */
transition: background 0.3s ease-in, opacity 0.3s ease-in;
}
.backdrop--open {
/* ... */
background: #000;
transition: background 0.4s ease-out, opacity 0.4s ease-out;
}
.posts .img-hover:before {
content: '';
display: block;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px;
/* image width */
height: 220px;
/* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 1;
}
<div class="posts">
<a href="#">
<h2 class="postname">
Travel Flashback #1 </h2>
</a>
<a class="img-hover" href="#">
<img width="960" height="720" src="http://.." class="img-hover" alt="" />
</a>
</div>
I have one problem with this code. As you see I want transition over pseudo element ::before, which has bkg img.
When I hover on, transition works smoothly, but when I leave mouse, bkg img goes away immediately without transition.
Can you please suggest something?
On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this
.posts .img-hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px; /* image width */
height: 220px; /* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
opacity: 1;
}
For others browsing through this forum, I came to this thread with exact same problem, I tried to switch transition focus from
opacity 0.35s ease-in-out
to:
all 0.35s ease-in-out
and issue was resolved.
My browser is Chromium version 80.0.3987.162, Debian Linux 10.4
My issue was actually that the transition did not work at all. The element appears and disappears instantly. For those with a similar problem and came here, I believe CSS ignores the on-hover transition for an empty element even if the content will be added on hover and the reason it doesn't transition when you hover off is because the content is removed immediately.
Instead of
elem:before{
opacity:0;
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
content:'something';
}
move content to elem:before
elem:before{
opacity:0;
content:'something';
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
}
If you want the content only on hover but you want to transition another property (like width) and opacity can't be used, content: ''; should work on hover but remember to keep the property even when you hover off.
To answer OP's question and why the solution by ynter works it's because the background disappears once they hover off. Keep the background in the :before element.
I want to fade an item in using opacity and set its visibility accordingly, once the opacity transition is done.
Consider this code:
.menu {
transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
opacity: 0;
visibility: hidden;
}
.menu.open {
opacity: 1;
visibility: visible;
}
This menu pops straight in, due to the 0.25s delay on visibility, but fades out correctly.
I want it to fade both in and out, but I can't find a way to set a delay function to the visibility property separately for in and out transitions. Is this even possible?
So ideally, I want to tell visibility to have a 0s delay to start and then a 0.25s delay to end, but it seems I can only set one value.
This happens because your item is no longer visible. As you're delaying the visibility transition, your item will get its opacity changed, without this change being visible. Then (0.25s later), the visibility transition begin... but your item has already an opacity: 1.
You should remove the transition delay/duration for visibility when item is showing:
$(document).on('click', function(event) { $('.menu').toggleClass('open'); });
.menu {
transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
opacity: 0;
visibility: hidden;
}
.menu.open {
transition: opacity 0.25s ease-out;
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="menu open">My menu</nav>
If a create some simple rules with a transition:
.foo {
opacity: 1;
position: absolute;
top: 0;
left: 0;
transition: opacity .3s ease;
}
.foo.is-hidden {
opacity: 0;
top: -9999;
left: -9999;
}
i am dynamically adding and removing the is-hidden class with js.
<div class="foo"> ----> <div class="foo is-hidden">
when i do this, I would like the opacity transition to happen before the absolute position flips it off the screen.
can this be done with just transition? or do i somehow leverage a keyframe animation? I have not done such a thing before?
You can use transition-delay in conjunction with transition:
.foo {
transition: opacity 1s ease, top 1s, left 1s;
transition-delay: 0s, 1s, 1s;
}
In my Fiddle, I set opacity to 0.5 so you can see the effect:
http://jsfiddle.net/5knxvkc0/
I'm trying to user css3 transitions to fade the opacity of an element (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).
For instance, I say:
-webkit-transition: opacity 2s ease-in-out;
Is there a way to specify a different "return to original state" time than the 2s?
I'd like to low the opacity in 2 seconds, but bring it back up in 0.5 seconds.
CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) seems to accomplish this but using multiple elements. Any better way?
Yes, there is a better way - http://jsfiddle.net/bJKpu/
Just specify different transition-duration-s for normal and hovered state:
div {
height: 200px;
width: 200px;
background: orange;
opacity: .5;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
}
div:hover {
opacity: 1;
height: 300px;
width: 300px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
}