• Sélection animée

    Arrêt au survol.

     

     

    code.

    <div id="fd">
    <p id="nb">&nbsp;</p>
    <p id="co">&nbsp;</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é.