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 transition to fade in image isn't working
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>
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>
CSS transition fade in only the background not the child divs
Move the background to a new div inside of the .content_top
element. This will create a new layer which we can animate without affecting the content.
Give .content_top
and .main_header
a position: relative
value. This will make the .content_top
a relative container, and give .main_header
the possibility to use the z-index
.
In the snippet below I've added a new element: .main_bg
. This element will get the background image and the animation.
Give the .main_bg
element a position: absolute;
. This will allow you to overlay elements on top of each other, in this case .main_bg
and .main_header
.
setTimeout(function() {
// Set BG image
var bg_content = document.querySelector('.main_bg');
bg_content.style.background = "linear-gradient(0deg,#000 0,rgba(0,0,0,.7) 35%,rgba(0,0,0,.4) 50%,rgba(0,0,0,0) 100%),url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg) no-repeat";
bg_content.style.backgroundSize = "cover";
bg_content.style.backgroundPosition = "center";
bg_content.classList.add("fade-in");
}, 1500);
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.main_bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_header {
position: relative;
color: blue;
text-align: center;
font-size: 30px;
z-index: 1;
}
.content_top {
height: 300px;
position: relative;
}
<div class="content_top">
<div class="main_bg"></div>
<div class="main_header"><span class="vertical_line"></span>
<p data-transkey="main_header_notrans"><span class="tino">Some header</span> <br> some text</p>
</div>
</div>
CSS animation to fade in and out at different rates with a pause
You can achive it with one css animation.
.el {
width: 100px;
height: 100px;
background-color: green;
}
.fadeInOut {
opacity: 0;
-webkit-animation: fadeInOut 14s;
animation: fadeInOut 14s;
}
@keyframes fadeInOut {
0% {
opacity: 0;
}
14% {
opacity: 1;
}
86% {
opacity: 1;
}
100 {
opacity: 0;
}
}
@-webkit-keyframe fadeInOut {
0% {
opacity: 0;
}
14% {
opacity: 1;
}
86% {
opacity: 1;
}
100 {
opacity: 0;
}
}
https://codepen.io/callmesupercookie/pen/xxOagdo
css transition opacity fade background
Wrap your image with a span
element with a black background.
.img-wrapper {
display: inline-block;
background: #000;
}
.item-fade {
vertical-align: top;
transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover {
opacity: 0.2;
}
<span class="img-wrapper">
<img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>
Related Topics
How to Make a <Svg> Element Expand or Contract to Its Parent Container
Is H1 Tag That's Hidden Using Display:None Given Prominence by Search Engines
Rotating Table Header Text with CSS Transforms
How to Start a New Column in Flex Column Wrap Layout
Font Awesome Fonts Show Up as Boxes on IE8
How to Target Safari for MAC Only
Set Bootstrap Navbar Transparency on Scroll
Purpose of *:Before, *:After Rule Without Content Property
How to Efficiently Load Google Fonts in Nuxt
How to Override Global CSS in a CSS Module File
Is There a Functional Difference Between > *:First-Child and > :First-Child
Perspective and Translatez Moves Diagonally
The Behaviour of Top: Auto; Bamboozles Me
Apply CSS Rules If Browser Is Ie
Multiline-Flexbox in Ie11 Calculating Widths Incorrectly
How to Have Different Colored Left and Top Borders in CSS with Straight Join