-
Sélection animée
Arrêt au survol.
code.
<div id="fd">
<p id="nb"> </p>
<p id="co"> </p>
</div>
<style><!--
#fd{position:relative; width:800px; height:600px; margin:10px auto; border:4px ridge grey;}
#nb{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/05/DSCN3657f.JPG'); filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.5;}
#co{animation: jalle 10s linear infinite alternate; animation-play-state: running; position:absolute; z-index:2;width:200px; height:600px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/05/DSCN3657f.JPG'); background-position:top left; filter: brightness(120%); -webkit-filter: brightness(120%);}
@keyframes jalle {from { background-position: 0% 0%; transform:translate(0px, 0px); } to { background-position: 100% 0%;transform:translate(600px,0px); } }
#co:hover{animation-play-state: paused;}
--></style>
L'animation Jalle est active par défaut et s'arrête au survol; elle est appliquée sur la sélection colorée (co), renforcée légèrement en luminosité.