Déplacement de l'image à travers l'écran avec CSS3

J'ai été la navigation sur le web depuis un certain temps à essayer de trouver un moyen de faire déplacer les icônes sur l'écran (à partir de la gauche et vers le centre du corps div) lors du chargement de la page. Comment cela peut-il être fait?

C'est ce que j'ai à ce jour:

CSS3

a#rotator {
    text-decoration: none;
    padding-right: 20px;
    margin-left: 20px;
    float: left;
}

a#rotator img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    border-radius:60px;
    transition-duration: 1s;
    }

a#rotator img:hover { 
    box-shadow: 0 3px 15px #000;
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    transform: translate()
}

OriginalL'auteur Ali Boulala | 2014-04-20

  1. 5

    Si vous voulez un pur CSS solution, vous pouvez utiliser le CSS3 long-métrage d'animation.
    Vous créez ou déclarer une animation avec le mot-clé @animation suivi par le nom que vous souhaitez donner à cette animation. À l'intérieur des accolades, vous devez indiquer les images clés de l'animation et de quelles propriétés CSS sera appliqué à l'image clé, de sorte que la transition entre les images clés est fait.
    Vous devez spécifier au moins deux images clés, le début et la fin de l'animation avec les mots-clés from et to, suivie par les propriétés à l'intérieur des accolades. Par exemple:

    @keyframes myanimation
{
    from {
        left: 0;
    }
    to {
        left: 50%;
    }
}

    Ou un exemple avec trois images clés (le % indique le pourcentage de la durée):

    @keyframes myanimation
{
    0% {
        left: 0;
    }
    10% {
        left: 50%;
    }
    100% {
        left: 10%;
    }
}

    Une fois que vous avez créé l'animation, vous devez spécifier l'élément que vous souhaitez animer, c'est juste le animation de la propriété à l'intérieur de la règle CSS qui correspond à l'élément. Notez que le nom de la valeur doit correspondre à celui que vous avez créé avant, et vous la durée de l'animation. Par exemple:

    a#rotator {
    animation: myanimation 5s;
}

    Ici, vous pouvez spécifier la durée, le nombre de fois qu'il faut le répéter, etc. Vous pouvez lire les specs ici: http://www.w3.org/TR/css3-animations/

    Ici vous pouvez voir un exemple avec le code que vous avez fournies: http://jsfiddle.net/mcSL7/1/

    J'ai arrêté de l'élément flottant et j'ai attribué la position absolue, donc je peux me déplacer dans le corps avec les propriétés top et left.

    Cette fonctionnalité CSS est pris en charge par presque tous les navigateurs actuels, même si certains d'entre eux ont besoin de l'-webkit - vendeur préfixe. Vérifiez ici: http://caniuse.com/#feat=css-animation

    Merci! c'est très utile. Je me demandais comment vous feriez pour 5 images à la fois au lieu de simplement l'un?
    Si vous souhaitez que tous les cinq en même temps, s'appliquent de la même classe pour les cinq images et de les appliquer à l'animation de la règle de classe: http://jsfiddle.net/5q5DQ/1/. Si vous voulez être animé à plusieurs reprises, de leur donner des id et appliquer un délai différent pour chacun, et notez la valeur forwards dans l'animation de la propriété, qui rend l'élément encore dans la dernière image de la position: http://jsfiddle.net/u5EW6/1/
    Parfait! un million de mercis 🙂
    Salut @pablopixel, je suis en train de le faire en 3D. J'ai essayé quelques exemple que j'ai trouvé en ligne cependant, je vais avoir de la difficulté à obtenir leur travail. Si vous pouviez montrer comment convertir cet exemple en 3D, alors je vais être en mesure de l'appliquer à la mienne. En Ce Qui Concerne, Glyn
    Salut @Glyn, voulez-vous dire CSS 3D transforme? Qu'avez-vous essayé jusqu'à présent? Pourriez-vous fournir un violon?

    OriginalL'auteur pablopixel

  2. 1

    Utiliser jQuery

    html

    <div id="b">&nbsp;</div>

    css

    div#b {
    position: fixed;
    top:40px;
    left:0;
    width: 40px;
    height: 40px;
    background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat;
}

    script

    var b = function($b,speed){


    $b.animate({
        "left": "50%"
    }, speed);
};

$(function(){
    b($("#b"), 5000);
});

    voir jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/

    OriginalL'auteur Vishnuraj V