Je continue dans les tests CSS. Cette fois-ci j’ai tenté une animation; toujours sans image et sans javascript :

Pour mettre en pause l’animation, il suffit de passer le curseur de la souris sur le poisson.

Le montage du poisson: http://www.lespetitspois.fr/poisson-rouge-et-petits-pois-sauce-css

L’animation du jour:

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move {
    0%   {left:0px; top:0px;}
    40%  {left:200px; top:0px;}
    50%  {    webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
    75%  {left:0px; top:0px;}
    100%  {    webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}

/* Standard syntax */
@keyframes move {
    0%   {left:0px; top:0px;}
    40%  {left:200px; top:0px;}
    50%  {    webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
    75%  {left:0px; top:0px;}
    100%  {    webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}


 .aquarium {
    background-color: transparent;
    width:250px;
    height:200px;
    position:relative;
    float:left;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-name: move; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-name: move;
    animation-duration: 4s; 
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
 
}

 .aquarium:hover {
    background-color: transparent;
    width:300px;
    height:200px;
    position:relative;
    border-radius: 50%;
    float:left;
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    animation-play-state:paused;
}