I'm working on a new overlay screen technique for a site that I'm working on. I want to leverage animation to CSS because it is easier, and faster than JavaScript animations. I'm doing something simple, but I'm having trouble with webkit-based browsers like Chrome and Safari.
This is the code I'm using:
body:after {
content: '';
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: -1;
transition-duration: .5s;
-webkit-transition-duration: .5s;
opacity: 0;
}
body.dimmed:after {
z-index: 9999;
opacity: .7;
}
AS you can see, it uses the after pseudo-element, and based on the body class it animates it to a show it or hide it. It works well on Firefox, but not on Chrome or safari. On these browsers the animation does not happen, and the change is instantaneous, which is not what I want. If you apply the same CSS to the body, rather than the pseudo-element, the animation happens:
body {
content: '';
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: -1;
transition-duration: .5s;
-webkit-transition-duration: .5s;
opacity: 0;
}
body.dimmed {
z-index: 9999;
opacity: .7;
}
This makes me think that transitions do not apply to pseudo-elements on Chrome. Should this be reported as a bug?
It's a known bug, known for years already:
https://bugs.webkit.org/show_bug.cgi?id=23209
http://code.google.com/p/chromium/issues/detail?id=54699
BTW, at the moment you could try to use this technique: http://kizu.ru/en/pseudos/ — by triggering the transition on the element itself and then inheriting the value to the pseudo-element. That won't work for every property (for opacity for example), but you could weork around with that using some imagination.
Related
I want to do a custom opacity animation in elementor pro. I tried to find some tutorials online as I am a beginner in this.
a reference that I want: https://www.anchour.com/
Here is what I found in the main css:
.hero.hero--home.video-in .hero-video-init, .hero.hero--home.video-in .hero-video-wrap:after, .hero.hero--home.video-in .hero-video-wrap:before {
opacity: 1;
}
.hero.hero--home .hero-video-wrap:after {
background-color: #000;
opacity: 0;
transition: opacity 3s ease;
transition-delay: 6.25s;
z-index: 10;
}
.hero.hero--home .hero-video-wrap:after, .hero.hero--home .hero-video-wrap:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
If I undestud it correctly, the "opacity" effect on their website its just white text on black video, then the video ends there're just black background and another background with higher z-index value has the opacity transition from 0 to 1.
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I am building a lightbox based on the CSS3 selector :target which selects an element based on the hash in the url. I want to animate the target element on the :target event, but this doesn't seem to work.
Let's say we have a div #banana which is shown when a link to #banana is pressed.
#banana {display: none;}
#banana:target {display: block;}
This works fine. But when trying to animate the element, that doesn't work. See this fiddle.
div#banana {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
}
div#banana:target {
display: block;
opacity: 1;
}
The element won't fade in. It is as if the browser skips the animation and immediately triggers the end result.
The problem is that you are changing the display property. The display property can't be transitioned since you can't really animate an element turning from nothing into a block.
The display property can be left out altogether. You will however need to give your element visibility: hidden so that it will not prevent the link from being clicked, then transition it to visibility: visible:
div#banana {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
visibility: hidden;
}
div#banana:target {
opacity: 1;
visibility: visible;
}
Updated fiddle
It's not possible to animate display property. There is simply no gradual stages between none and block.
In your case you can "hide" element by using huge negative top position and revert it back to 0 on target event. Actual transition will be handled by changing opacity.
div#banana {
position: fixed;
left: 0;
top: -1000px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 1s linear;
}
div#banana:target {
top: 0;
opacity: 1;
}
<div id="banana">
close
</div>
Do you want a banana? Click me!
I'm having a problem with CSS 3D perspective property.
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>
I just want to animate the figcaption at :hover to perform a folding-down effect (like http://davidwalsh.name/demo/folding-animation.php) from -90deg to 0deg , considering that -90deg represent the block flatten (and so not visible)
/** vendor prefixes have been removed for better readability **/
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 500ms;
transform: rotateX(-123deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
The problem is that perspective does not give the same render for Chrome and Firefox.
I had to set manually the figcaption default transform to rotateX(-123deg); depending of the perspective value which is 500px, and it works well on Chrome, but not on Firefox.
Theoretically, it should be -90deg when not :hover and 0deg when :hover, but seems that the perspective attribute changes the length of the depth field and so -90deg does not works anymore.
I wonder what are the best practices when playing with perspective and rotate in order to make it works well on all recent browsers ?
Best regards.
PS: Just copy/paste the HTML & CSS and try it in Chrome and FF, you should immediately see what's wrong ;)
I know it won't be helpful, but personnaly I tried some experiments with perspective and each browser render the perspective in a different way. Some browsers don't support the perspective. So, your application won't be accesible to everyone, maybe you should use another technology until all of the main browsers are fully compliant with the perspective.
Probably it's too late for this answer to be useful.
Anyway, the best way to make the element invisible is to keep the angle at 90deg, but set the perspective origin to be just above it. (No need to figure the exact angle that will get the desired effect)
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
perspective-origin: top center; /* added this setting */
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 2s;
transform: rotateX(-90deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>
I have set opacity for a overlay which is working fine in FF, Chrome, Safari and IE9 but not in IE8. I googled alot but did not find any solution.
my css code is
#overlayEffectDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
width: 100%;
height: 100%;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.50;
background: #000;
position: absolute;
top: 0;
left: 0;
z-index: 3000;
/* hide it by default */
display: none;
}
In FF it is looking as below:
but in IE8 it is looking as below:
Found solution here. Opacity was not the problem I did some debugging and found it was working fine for ie8 the issue was with jquery fadeIn and fadeOut. jQuery fadeIn was making translucent background to turn solid.
Thanks to all who helped.
I don't think you syntax for the filter is correct:
http://blogs.msdn.com/b/ie/archive/2009/02/19/the-css-corner-using-filters-in-ie8.aspx
this might not be the cause of the problem but it might be worth ruling it out.
May be you have define zoom also. write like this:
#overlayEffectDiv {
width: 100%;
height: 100%;
filter: alpha(opacity = 50);
opacity: 0.50;
*zoom:1;
background: #000;
position: absolute;
top: 0;
left: 0;
z-index: 3000;
display: none;
}
If the problem occurs for some animation effect involving the layer, you could avoid use filter at all in IE and use instead as a repeated background a small (not too small, like 2x2, use e.g. 100x100) transparent png file with a black background color and ~80% opacity