CSS Animare il testo da sinistra a destra in un contenitore div con overflow nascosto

Question

Così ho recentemente lavorato su un progetto privato, e siccome sono un grande fan dei CSS, voglio fare la maggior parte delle animazioni in CSS piuttosto che in JavaScript.

Oggi ho voluto creare qualcosa di simile: Text moving from left to right

Penso che questo potrebbe essere possibile con animazioni CSS. In teoria, ho un wrapper div con posizione: relativo, larghezza fissa e overflow: nascosto. All'interno, c'è un div con posizione: assoluta e sinistra: 0 e inferiore: 0. Ora, in alcuni casi, il testo è troppo lungo per il div genitore, e volevo lasciare che il testo del testo "fluttuasse" attraverso il div genitore: in realtà l'animazione del div da sinistra: 0 a destra: 0.

mi sono imbattuto su alcune animazioni CSS e provato questo

@keyframes floatText{ 
    from { 
    left: 0; 
    } 

    to { 
    right: 0; 
    } 
} 

sul div bambino. E ovviamente questo non ha funzionato. Animazioni come da sinistra: da 0 a sinistra: -100px funzionano, ma ciò non garantisce che l'intero testo sia visibile, quando è più lungo di quei 100 px aggiuntivi. C'è un modo carino e pulito per farlo funzionare? Sicuramente JavaScript potrebbe oscurare questa funzionalità desiderata. Ma volevo sapere se c'è un modo per farlo in puro CSS.

Grazie in anticipo!

EDIT:

Per clearify quello che ho in mente, ho creato un gif visualizzazione di quello che voglio realizzare con le animazioni CSS: Animated

Come potete vedere, abbiamo tre di questo tipo uno accanto all'altro, alcuni hanno un nome che si adatta direttamente, altri potrebbero essere troppo lunghi e dovrebbero essere animati avanti e indietro, in modo che l'utente possa leggerlo :)!

Grazie ancora!

EDIT2:

C'è un modo per ottenere qualcosa di simile?

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

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

Questa sarebbe la soluzione definitiva, so che questo tipo di codifica non è possibile in CSS, ma forse con alcune modifiche CSS3 come calc() o qualcosa del genere? Sono fuori di idee ora :(

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;} 
} 

È possibile rendere l'animazione più liscia con l'aggiunta di più valori% e PX
EDIT:. Siamo spiacenti, appena visto il quadro Accanto a left: 0px; aggiungi top: 10px; o comunque vuoi spostarlo a una data percentuale.

Answer 2

Aggiungi facilità all'animazione per smoothne ss, e usa% invece di px per spostarlo a sinistra oa destra.

Answer 3

hi tizio Ho provato questo

Nota: ma troverete una cosa manca e vedrete che l'animazione non raggiungerà verso destra puramente sinistra e voglio dire che non è possibile vedere l'intero testo del div.

e che è a causa del valore del sinistra e destra ho impostato sul -100 e così perché non riuscivo a trovare l'alternativa per che così

destra ora cercando di vedere come puoi farlo accadere.

e qui è la mia prova

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>

e qui si può controllare la demo del codice di lavoro di cui sopra

DEMO CODE

Answer 4

c hange tuo valore del fotogramma chiave in %

provare questo

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>