How to fade in image on page load

Question

How can I make my image fade in on page load for both desktop and mobile devices? For now my code only works on mobile devices.

CSS:

#test img {
  width: auto; 
  height: 50px;
  position: absolute;
  -webkit-animation: fadein 7s;
  -moz-animation: fadein 7s;
  -ms-animation: fadein 7s; 
  -o-animation: fadein 7s; 
  animation: fadein 7s;
}

@media only screen and (max-width: 768px) {
  #test img { 
    width: auto; 
    height: 20px;
    position: absolute;
  }
}

Possible duplicate of [Using CSS for fade-in effect on page load](https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load) — JSnewbie, Oct 18 '17 at 18:59

score 0 · Answer 1 · answered Oct 18 '17 at 18:51

0

I can't say for sure because the css isn't provided, but I think your keyframes will be in a media query for mobile only. Something like @media only screen and (max-width: 768px) {

answered Oct 18 '17 at 18:51

Dale

1,911
11
18

Joseph Cho · Accepted Answer · 2017-10-18T19:04:45.223

0

Animations also need keyframes so it knows where to begin and end. In this case your fadein animation is close. It also needs a starting and ending opacity so it can go from invisible to visible. Try adding the keyframe below:

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Working fiddle here: https://jsfiddle.net/70p9cxdb/1/

edited Oct 18 '17 at 19:04

answered Oct 18 '17 at 18:57

Joseph Cho

4,033
4
26
33

How to fade in image on page load

2 Answers2