ein Bild animieren dim und hell mit CSS

Question

Ich möchte ein Bild animiert werden dim und hell gleichzeitig.

Sollte ich .gif/flash verwenden oder ist es möglich mit css?

Danke

Answer 1

Ja, möglich es ist. Versuchen Sie es mit diesem Code.

.logo{ 
 
    animation: logo-animation linear 4s; 
 
    animation-iteration-count: infinite; 
 
    transform-origin: 50% 50%; 
 
    -webkit-animation: logo-animation linear 4s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-animation: logo-animation linear 4s; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-transform-origin: 50% 50%; 
 
    -o-animation: logo-animation linear 4s; 
 
    -o-animation-iteration-count: infinite; 
 
    -o-transform-origin: 50% 50%; 
 
    -ms-animation: logo-animation linear 4s; 
 
    -ms-animation-iteration-count: infinite; 
 
    -ms-transform-origin: 50% 50%; 
 
} 
 

 
@keyframes logo-animation{ 
 
    0% { 
 
    opacity:1; 
 
    } 
 
    50% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:0.990099773451273; 
 
    } 
 
    101% { 
 
    opacity:0.99; 
 
    } 
 
} 
 

 
@-moz-keyframes logo-animation{ 
 
    0% { 
 
    opacity:1; 
 
    } 
 
    50% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:0.990099773451273; 
 
    } 
 
    101% { 
 
    opacity:0.99; 
 
    } 
 
} 
 

 
@-webkit-keyframes logo-animation { 
 
    0% { 
 
    opacity:1; 
 
    } 
 
    50% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:0.990099773451273; 
 
    } 
 
    101% { 
 
    opacity:0.99; 
 
    } 
 
} 
 

 
@-o-keyframes logo-animation { 
 
    0% { 
 
    opacity:1; 
 
    } 
 
    50% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:0.990099773451273; 
 
    } 
 
    101% { 
 
    opacity:0.99; 
 
    } 
 
} 
 

 
@-ms-keyframes logo-animation { 
 
    0% { 
 
    opacity:1; 
 
    } 
 
    50% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:0.990099773451273; 
 
    } 
 
    101% { 
 
    opacity:0.99; 
 
    } 
 
}

<div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" /></div>