So blenden Sie ein Bild beim Laden der Seite ein

Question

Wie kann ich mein Bild beim Laden von Seiten für Desktop- und mobile Geräte einblenden lassen? Momentan funktioniert mein Code nur auf mobilen Geräten.

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; 
    } 
} 

Answer 1

Animationen brauchen auch Keyframes, so dass es weiß, wo zu beginnen und zu beenden. In diesem Fall ist Ihre fadein Animation in der Nähe. Es braucht auch eine Start- und End-Deckkraft, damit es von unsichtbar zu sichtbar gehen kann. Versuchen Sie, die Keyframe-Zugabe unter:

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

Arbeits Geige hier: https://jsfiddle.net/70p9cxdb/1/

Answer 2

Ich kann nicht sicher sagen, weil die CSS nicht vorgesehen ist, aber ich denke, Ihre Keyframes in einer Medienabfrage für mobile nur sein wird. So etwas wie @media only screen and (max-width: 768px) {