CSS-déplacer du texte de gauche à droite

Je veux créer une animation HTML "rectangle de sélection" qui défile en arrière et en avant sur un site web:

<div class="marquee">This is a marquee!</div>

et le CSS:

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

Le problème est, la marquise ne s'arrête pas lorsqu'il atteint le bord droit de l'écran; il se déplace tout le chemin hors de l'écran (faire une barre de défilement horizontale apparaît brièvement) et puis revient.

Alors, comment puis-je faire la marquise s'arrêter quand son bord droit atteint le bord droit de l'écran?

EDIT: Bizarrement, cela ne fonctionne pas:

50% {right: 0%}
l'utilisation de javascript pour arrêter l'animation à l'aide d'une propriété css
comment le javascript de savoir quand arrêter l'animation?
Au lieu de gauche: 100%, il convient de gauche: 100% - ( number of characters in string * space taken by single character ) Maintenant, évidemment, vous ne serez pas faire de telles choses en css. Afin de mieux au lieu d'utiliser left ou right , utilisez margin-left ou margin-right.
Oui, mais ça ne fonctionne toujours pas, même si vous modifier mon code pour margin-left

OriginalL'auteur tanis.control | 2012-05-21

  1. 3

    En quelque sorte je l'ai eu à travailler en utilisant la marge de droite, et de se déplacer de droite à gauche.
    http://jsfiddle.net/gXdMc/

    Ne sais pas pourquoi, dans ce cas, la marge de droite de 100% n'est pas aller hors de l'écran. 😀
    (testé sur chrome (18)

    EDIT: maintenant la gauche vers la droite travaille trop http://jsfiddle.net/6LhvL/

    Testé sur Safari. fonctionne bien 🙂
    Oui cela fonctionne, merci :). J'espère que quelqu'un peut dire pourquoi c'est le cas. Je pense que c'est à cause de votre {text-align: right;}
    voir mon commentaire dans votre question.
    notez que la modification de la css à l'aide text-align:left et margin-left n'a pas produit les résultats souhaités. Fonctionne uniquement avec text-align: right et margin-right. J'ai édité ma réponse pour la direction que vous voulais 🙂
    Que faire si le texte est plus grand que le contenant? Le texte ne bouge pas tous ensemble. jsfiddle.net/sj3k6kgu

    OriginalL'auteur ephemeron

  2. 4

    Vous pouvez simplement utiliser CSS animation générateur de texte. Il y a des pré-créé des modèles déjà

    OriginalL'auteur Timur Gafforov

  3. 1

    Salut vous pouvez atteindre votre résultat avec l'utilisation de <marquee behavior="alternate"></marquee>

    HTML

    <div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>

    CSS

    .wrapper{
    max-width: 400px;
    background: green;
    height: 40px;
    text-align: right;
}

.marquee {
    background: red;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

    voir la démo:- http://jsfiddle.net/gXdMc/6/

    Malheureusement, obsolète.

    OriginalL'auteur Shailender Arora

  4. 1

    J'ai comme l'utilisation de celui-ci pour éviter que les choses sont en dehors de mon div éléments. Elle contribue à la CSS roulements de trop.

    .marquee{
    overflow:hidden;
}

    cela permet de masquer tout ce qui bouge/est en dehors de la div qui va empêcher le navigateur de l'expansion et de causer une barre de défilement apparaît.

    OriginalL'auteur Spider Pig

  5. 0

    Si je vous comprends correctement à la question, vous pouvez créer un wrapper autour de votre rectangle de sélection, puis attribuer un width (ou max-width) de l'élément d'habillage. Par exemple:

    <div id="marquee-wrapper">
    <div class="marquee">This is a marquee!</div>   
</div>

    Et puis #marquee-wrapper { width: x }.

    J'ai pensé à cela aussi, mais cela ne fonctionne pas. {left: 100%} permet de déplacer tout le chemin hors de l'écran. Je souhaite que je pourrais faire {left: 100% - 30px}

    OriginalL'auteur David542

  6. 0

    Je ne suis pas sûr si c'est la bonne solution mais j'ai atteint cette
    en les redéfinissant .rectangle de la classe, juste après l'animation CSS.

    De vérifier ci-dessous:

    <style>
#marquee-wrapper{
    width:700px;
    display:block;
    border:1px solid red;
}

div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}

@-moz-keyframes myfirst /* Firefox */{
0%   {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{ 
left:700px; top:0px
}
</style>

<!-- HTMl COde -->

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>

    OriginalL'auteur sachin kumar