CSS3 Transition - Fade out effect
You can use transitions instead:
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
CSS how to make an element fade in and then fade out?
Use css @keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards;}
@-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; }}
@keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; }}
<div class=elementToFadeInAndOut></div>
Using CSS for a fade-in effect on page load
Method 1:
If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Demo
- http://jsfiddle.net/SO_AMK/VV2ek/
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
Plain JavaScript (not in the demo)
document.getElementById("test").children[0].className += " load";
Demo
- http://jsfiddle.net/SO_AMK/a9dnW/
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
- http://jsfiddle.net/SO_AMK/a9dnW/3/
Browser Support
jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/
jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.
CSS fade-out and stay so
Use animation-fill-mode: forwards;
for that purpose:
.fade-out {
animation: fadeOut ease 5s;
animation-fill-mode: forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>
How to Fade out with CSS Transition (Managed to fade in, but don't understand how to fade out without Webkit )
add this
.image p {
transition: .5s ease-out
}
Fade out animation in pure CSS
Here is a 100% pure css solution.
#square { width: 50px; height: 50px; background: lightblue; transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition:opacity 1s ease-in-out;}#myBox:checked ~ .animated { opacity: 0;}#myBox ~ .animated { opacity: 1;}
<input type="checkbox" id="myBox" style="display:none;"/><button id="toggle"><label for="myBox">toggle</label></button><div id="square" class="animated"></div>
CSS3 : Fade in on hover and Fade out when hover is gone
CSS Transitions don't work on display:block/none;
You can manage to give that effect using visibility/opacity
properties.
Check this example, You can manually add the transition-delay
property if you really want it to add.
.main_div { width: 100px; height: 100px; border: thin black solid; position: relative;}
.main_div .overlay_div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; transition: all 1s ease-out;}
.main_div:hover .overlay_div { visibility: visible; opacity: 1; transition: all 1s ease-in;}
<div class="main_div"> <div class="overlay_div"> some text </div></div>
Related Topics
How to Center an Inline-Block Element and If So, How
How to Make Round Corners to Both Inside of a Box and Its Border
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)
How to Store Inherit Value Inside a CSS Variable (Aka Custom Property)
Match All Elements Having Class Name Starting With a Specific String
Can CSS Force a Line Break After Each Word in an Element
Top Nav Bar Blocking Top Content of the Page
Is There a Sass.Js? Something Like Less.Js
Style Child Element When Hover on Parent
Do I Need to Wrap Quotes Around Font Family Names in Css
Opacity of Div'S Background Without Affecting Contained Element in Ie 8
Triangle Shape With Background Image
Defined Edges With Css3 Filter Blur
Show/Hide Div on Click With Css
CSS @Font-Face - What Does "Src: Local('☺')" Mean