la transition de la simplicité, de droite à gauche, comment?

facilité normalement se déplacer de gauche à droite, maintenant, je veux changer de droite à gauche
Comment puis-je le mettre dans mon CSS ?

exemple :

transition:         background-position 150ms ease-out;
-moz-transition:    background-position 150ms ease-out;
-webkit-transition: background-position 150ms ease-out;
-o-transition:      background-position 150ms ease-out;
utilisation de jQuery, il est et sera easear
doit utiliser les css pas de js!

OriginalL'auteur sIiiS | 2014-03-01

  1. 5

    Il n'y a pas de valeur par défaut direction pour transitioning les propriétés. Et ease-out est juste un calendrier de transition de la fonction:

    De la Spec:

    La transition-timing-function propriété décrit la façon dont le
    les valeurs intermédiaires utilisés pendant une période de transition sera calculée. Il
    permet une transition pour changer de vitesse pendant sa durée. Ces
    les effets sont communément appelées les fonctions d'accélération. Dans les deux cas, un
    fonction mathématique qui fournit une courbe lisse est utilisé.

    La direction de background-position de transition, dépend de la première et la dernier valeurs.

    Par exemple:

    .box {
    /* other styles here... */
    background-image: url(http://lorempixel.com/500/300);
    transition: background-position 150ms ease-out;
}

/* Move the background image from right to left */
.box.rtl { background-position: 0 center; }
.box.rtl:hover { background-position: 100% center; }

/* Move the background image from left to right */
.box.ltr { background-position: 100% center; }
.box.ltr:hover { background-position: 0 center; }

    TRAVAIL DE DÉMONSTRATION.

    OriginalL'auteur Hashem Qolami

  2. 3

    Peut-être vous pouvez essayer quelque chose comme cela:

    <html>
<head>
<style> 
div {
    float: right;

    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    transition-timing-function: linear;
    text-align: center;
}

div:hover {
    width: 300px;
}

body {
    width: 500px;
    border: solid black 1px;
}
</style>
</head>
<body>

<div>sample</div>

</body>
</html>

    En flottant le div à droite, vous aurez votre div départ sur le côté droit. Et quand il se dilate, il s'étend vers la gauche.

    OriginalL'auteur TienPing

  3. -1

    C'est simple,
    Comme votre gauche à droite de Transition et si vous voulez de droite à gauche Transition juste utiliser float:right; lorsque vous style vous Div(ect).

    OriginalL'auteur Umer Farooq