Animation avec les filtres CSS3

🏠 Accueil blog » Démonstrations CSS3

✔️ Support navigateurs :


<div class=fond>
<h1>Animation avec les filtres CSS3</h1>
<img src="2017.png" alt>
</div>


.fond{display:flex;flex-direction:column;align-items:center;justify-content:center}
    
.fond img{filter:drop-shadow(0 0 10px #000);animation:anim1 1.2s linear infinite;max-width:30%}
    
h1{animation:pulse .5s linear infinite;color:red}   
    
@keyframes anim{to{filter:hue-rotate(360deg)}}
@keyframes anim1{to{transform:rotate(1turn)}}
@keyframes pulse{0%{transform:scale(1)}30%{transform:scale(1)}40%{transform:scale(1.08)}50%{transform:scale(1)}60%{transform:scale(1)}70%{transform:scale(1.05)}80%{transform: scale(1)}100%{transform:scale(1)}}