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/
Related
I'm trying to make something like fullpage.js. I have an active element and previous element. When I'm scrolling I have transform property on the both blocks, one like
.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}
And another is
.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}
Without transition they appear in a moment without any delay. But when I add transition they starting to blink because of the opacity. How can I make the block first to transform and then to lose it's opacity
You can simply define multiple transitions:
div {
width: 200px;
height: 200px;
background: orange;
opacity: 0.5;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}
body:hover div {
transform: rotate(45deg);
opacity: 1;
}
<div></div>
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.
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;
}
I have an element that is red in resting state, and green when the user hovers their cursor over it. I have it set to ease the transition for 0.4s.
Instead of having the colour transition straight from red to green, I'd like it to pass through yellow at the midway point. So when the user mouses over it, it goes from red to yellow to green in one smooth transition. Is this possible?
This is my current code.
.element {
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.element:hover {
background-color: green;
}
You can use the CSS #keyframes animation syntax.
#keyframes animate-color {
0% { color: red; }
50% { color: yellow; }
100% { color: green; }
}
element:hover {
animation: animate-color 0.4s forwards;
}
Change the 0.4s value to control how fast the animation runs.
Here's an example for Chrome using -webkit-animation and #-webkit-keyframes:
https://jsfiddle.net/ahm2u8z2/1/
Make sure you cover all browser possibilities as the syntax is different for Chrome, Firefox, Internet Explorer and Opera.
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Here's more information for configuring your animations in CSS3, you can control things such as animation-delay, animation-direction, and many more.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Alteratively, if you're not up to using #keyframes (although I don't see why not), you can use pseudo elements to act as the middle color. All you need to do is control the delay of the transitions using transition-delay:
.element {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position: relative;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: green;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.element:hover:before {
opacity: 1;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:hover {
background-color: yellow;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="element"></div>
you could use keyframes for this:
.element {
background-color: red;
height: 300px;
width: 300px;
}
.element:hover {
-webkit-animation: changeColor 0.4s forwards;
animation: changeColor 0.4s forwards;
}
#-webkit-keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
#keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
<div class="element"></div>
This works by adding the keyframe sequence when the element is hovered, and not during the actual element's creation (so the keyframes only work during the hovered stage).
The forwards declaration is used so that the animation will 'pause' on the '100%' keyframe, rather than looping back and 'finishing where it started'. I.e. the first keyframe.
Please note: Other prefixes will need to be included see here for more info.