•  

    Swing

     

                         

     

    HTML

    <table border="0"><tbody><tr>
    <td><img class="swing" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s;" src="http://gif" alt="" width="230" height="180" /></td>
    <td><img class="swing" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s;" src="http://.gif" alt="" width="230" height="180" /></td></tr></tbody></table>

     

    CSS

    <style><!--
    .swing{
    border-radius: 20px;
    border: 2px dashed #ccc;
    box-shadow: 0 3px 9px #777;
    margin:10px 10px 10px 10px;
    -webkit-animation:swinging 10s ease-in-out 0s infinite;
    -moz-animation:swinging 10s ease-in-out 0s infinite;
    animation:swinging 10s ease-in-out 0s infinite;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
    }

    @-webkit-keyframes swinging{
    0% { -webkit-transform: rotate(0); }
    5% { -webkit-transform: rotate(-10deg); }
    25% { -webkit-transform: rotate(6deg); }
    30% { -webkit-transform: rotate(15deg); }
    35% { -webkit-transform: rotate(4deg); }
    40% { -webkit-transform: rotate(13deg); }
    45% { -webkit-transform: rotate(2deg); }
    50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
    100% { -webkit-transform: rotate(0); }
    }

    @-moz-keyframes swinging{
    0% { -moz-transform: rotate(0); }
    5% { -moz-transform: rotate(10deg); }
    25% { -moz-transform: rotate(6deg); }
    30% { -moz-transform: rotate(15deg); }
    35% { -moz-transform: rotate(4deg); }
    40% { -moz-transform: rotate(13deg); }
    45% { -moz-transform: rotate(2deg); }
    50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
    100% { -moz-transform: rotate(0); }
    }

    @keyframes swinging{
    0% { transform: rotate(0); }
    5% { transform: rotate(10deg); }

    25% { transform: rotate(6deg); }
    30% { transform: rotate(15deg); }
    35% { transform: rotate(4deg); }
    40% { transform: rotate(13deg); }
    45% { transform: rotate(2deg); }
    50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
    100% { transform: rotate(0); }
    }
    --></style>




  • Commentaires

    Aucun commentaire pour le moment



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :