CSS Animieren von Text aus mit Überlauf in div Container links nach rechts versteckt

Question

Also habe ich vor kurzem auf einigen privaten Projekt arbeiten, und da ich ein großer Fan bin CSS will ich die meisten der Animationen in CSS tun, anstatt in JavaScript.

Heute wollte ich so etwas schaffen: Man denke Text moving from left to right

ich dies mit CSS Animationen möglich sein könnte. In der Theorie habe ich einen div-Wrapper mit Position: relativ, eine feste Breite und Überlauf: versteckt. Innerhalb gibt es ein div mit der Position: absolut und links: 0 und unten: 0. Jetzt ist der Text in manchen Fällen zu lang für das Eltern-Div, und ich wollte, dass der Text durch das Eltern-Div "float": das Animieren des Div von links: 0 nach rechts: 0.

stieß ich auf einige CSS Animationen und versucht, diese

@keyframes floatText{ 
    from { 
    left: 0; 
    } 

    to { 
    right: 0; 
    } 
} 

auf das Kind div. Und das hat natürlich nicht funktioniert. Animationen wie von links: 0 bis links: -100px funktionieren, aber das stellt nicht sicher, dass der gesamte Text sichtbar ist, wenn er länger als diese zusätzlichen 100px ist. Gibt es einen schönen und sauberen Weg, um das zu schaffen? Sicher kann JavaScript diese gewünschte Funktionalität rocken. Aber ich wollte wissen, ob es eine Möglichkeit gibt, dies in reinem CSS zu tun.

Vielen Dank im Voraus!

EDIT:

Um clearify, was ich in meinem Kopf habe ich eine gif erstellt haben anzuzeigen, was ich mit CSS-Animationen erreichen möchten: Animated

Wie Sie sehen, haben wir drei von dieser Art nebeneinander haben einige einen Namen, der direkt passt, einige andere sind vielleicht zu lang und sollten vor und zurück animiert werden, damit der Benutzer es lesen kann :)!

Danke nochmal!

EDIT2:

Gibt es eine Möglichkeit, so etwas zu erreichen?

@keyframes floatText{ 
    from { 
    left: 0px; 
    } 

    to { 
    left: (-this.width+parent.width)px; 
    } 
} 

die ultimative Lösung Dies würde, weiß ich, dass diese Art der Codierung in CSS nicht möglich ist, aber vielleicht mit einigen CSS3 zwickt wie calc() oder etwas? Ich bin aus Ideen jetzt :(

Answer 1

CSS

div { 
    position: relative; 
    animation: animate 5s; 
    animation-direction: alternate; 
    } 
@keyframes animate { 
    0% {left: 0px;} 
    25% {left: 20px;} 
    50% {left: 50px;} 
    75% {left: 100px;} 
    100% {left: 150px;} 
} 

Sie die Animation glatter machen um mehr% und px Werte addiert
EDIT. Sorry, sah nur das Bild Du hast es verlinkt und bemerkt, dass du es nach unten bewegen willst, wenn es sich nach rechts bewegt.Nimm neben top: 10px; auch top: 10px; oder wie weit du es auch verschieben willst

Answer 2

Füge einfach-in-out zu der Animation für smoothne hinzu ss, und verwenden Sie% anstelle von px, um es nach links oder rechts zu bewegen.

Answer 3

hallo Geck ich dieses

Hinweis versucht haben: aber Sie werden eine Sache fehlt finden und dass Animation nicht erreichen wird auf die rein nach links und rechts sehen meine ich Sie nicht sehen der ganze Text des div.

und das ist aufgrund des Wertes der links und rechts ich habe auf die -100 und so, weil ich nicht die Alternative für das so

Recht finden konnte, Jetzt versuchend, das zu sehen, wie kannst du das geschehen lassen.

und hier ist mein Versuch

div.main_div{ 
 
    margin:0; 
 
    padding:0; 
 
    width: 20%; 
 
    height: 60%; 
 
    background-color:grey;  
 
    position:absolute; 
 
    overflow: hidden; 
 
} 
 
div.transparent_div{ 
 
    width:100%; 
 
    height:50px; 
 
    bottom:0; 
 
    background:red; 
 
    position:absolute; 
 
} 
 
div.text_wrapper{  
 
    height:50px; 
 
    bottom:0; 
 
    z-index:10; 
 
    background:transparent; 
 
    white-space: nowrap; 
 
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
 
    color:white; 
 
    font-size:2em; 
 
    vertical-align: middle; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
       -moz-transition: all 0.3s ease-in-out; 
 
       -o-transition: all 0.3s ease-in-out; 
 
       -ms-transition: all 0.3s ease-in-out; 
 
    position:absolute; 
 
    -webkit-animation: anim 1.5s infinite; 
 
    animation: anim 1.5s infinite; 
 
    animation-direction: alternate-reverse; 
 
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
 
    animation-timing-function: linear; 
 
} 
 

 
@-webkit-keyframes anim { 
 
    from { 
 
     left: -100%;   
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
} 
 

 
@keyframes anim { 
 
    from { 
 
     left: -100%; 
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
}

<body> 
 
<div class="main_div"> 
 
    <div class="text_wrapper">Hiii i am going right to left infinete times and here are the news 
 
    </div> 
 
    <div class="transparent_div"></div> 
 
</div> 
 
</body>

und hier können Sie die Demo des obigen Arbeits Code

DEMO CODE

Answer 4

c überprüfen hange Ihr Wert Keyframe in %

Diese

body{ 
 
    overflow: hidden; 
 
} 
 
p{ 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    animation: floatText 5s infinite alternate ease-in-out; 
 
} 
 

 
@-webkit-keyframes floatText{ 
 
    from { 
 
    left: 00%; 
 
    } 
 

 
    to { 
 
    /* left: auto; */ 
 
    left: 100%; 
 
    } 
 
}

<p>hello text</p>