Wie kann ich meine CSS Animated Text Übergänge verlangsamen?

Ich habe einen Satz mit einer Gruppe von Wörtern dazwischen erstellt, die animiert sind, um den Übergang nacheinander zu verblassen. Aber jetzt gehen die Wörter schnell über, und ich kann nicht scheinen, die Geschwindigkeit anzupassen.Wie kann ich meine CSS Animated Text Übergänge verlangsamen?

Bisher habe ich versucht, die Eigenschaft zu ändern: Animation-Verzögerung: -8s; auf der ganzen Strecke: Kinder, aber dies ändert nicht die Geschwindigkeit der Übergänge. Ich habe auch versucht, die Eigenschaft zu ändern Animation: Elemente 10s unendlich linear; ohne Glück.

Ich bin failrly neue CSS3-Animationen, und ich brauche Hilfe Verständnis:

Wie Transitionen CSS-Animation zu verlangsamen?
Wie kann ich die Geschwindigkeit kontrollieren?

Der Kodex (https://jsfiddle.net/qgrvaqfg/1/):

.sentence { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    height: 2em; 
 
    vertical-align: top; 
 
} 
 
.sentence p { 
 
    display: inline-block; 
 
} 
 
.slidingVertical { 
 
    display: inline-block; 
 
    vertical-align: text-top; 
 
} 
 
.slidingVertical span { 
 
    display: block; 
 
    height: 40px; 
 
    margin-bottom: -40px; 
 
    overflow: hidden; 
 
} 
 
.slidingVertical span { 
 
    animation: elements 10s infinite linear; 
 
} 
 
.slidingVertical span:nth-child(1) { 
 
    animation-delay: -8s; 
 
} 
 
.slidingVertical span:nth-child(2) { 
 
    animation-delay: -9s; 
 
} 
 
.slidingVertical span:nth-child(3) { 
 
    animation-delay: -10s; 
 
} 
 
.slidingVertical span:nth-child(4) { 
 
    animation-delay: -11s; 
 
} 
 
.slidingVertical span:nth-child(5) { 
 
    animation-delay: -12s; 
 
} 
 
.slidingVertical span:nth-child(6) { 
 
    animation-delay: -13s; 
 
} 
 
.slidingVertical span:nth-child(7) { 
 
    animation-delay: -14s; 
 
} 
 
.slidingVertical span:nth-child(8) { 
 
    animation-delay: -15s; 
 
} 
 
.slidingVertical span:nth-child(9) { 
 
    animation-delay: -16s; 
 
} 
 
.slidingVertical span:nth-child(10) { 
 
    animation-delay: -17s; 
 
}  
 
@keyframes elements { 
 
    0% { 
 
    opacity: 0; 
 
    max-width: 10px; 
 
    } 
 
    5%, 10% { 
 
    opacity: 1; 
 
    max-width: 400px; 
 
    } 
 
    15%, 100% { 
 
    opacity: 0; 
 
    max-width: 10px; 
 
    } 
 
}

<body> 
 
    <section class="wrapper"> 
 
    <h2 class="sentence">Janie is a lovely girl because she is 
 
     <div class="slidingVertical"> 
 
     <span>amazing</span> 
 
     <span>beautiful</span> 
 
     <span>cute</span> 
 
     <span>honest</span> 
 
     <span>cool</span> 
 
     <span>brave</span> 
 
     <span>wild</span> 
 
     <span>interesting</span> 
 
     <span>local</span> 
 
     <span>sexy</span> 
 
     </div> 
 
     <p> 
 
     and cool. 
 
     </p> 
 
    </h2> 
 
    </section> 
 
</body>

Quelle

2016-04-06 ChosenJuan

Sie sicher ist, aber manchmal wünsche ich, dass sie die Dinge langsam angehen würde und stoppen so schnell – ChosenJuan

Ich denke, das ist das Ergebnis, das youre suchen:

.slidingVertical span mit opacity:0 Plus max-width:10px und jedes Wort mit eine positive Verzögerung von 0 bis 9):

body { 
 
    background: pink; 
 
} 
 

 
.sentence { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    height: 2em; 
 
    vertical-align: top; 
 
} 
 

 
.sentence p { 
 
    display: inline-block; 
 
} 
 

 
.slidingVertical { 
 
    display: inline-block; 
 
    vertical-align: text-top; 
 
} 
 

 
.slidingVertical span { 
 
    display: block; 
 
    height: 40px; 
 
    margin-bottom: -40px; 
 
    overflow: hidden; 
 
} 
 

 
.slidingVertical span { 
 
    animation: elements 20s infinite linear; 
 
    opacity: 0; 
 
    max-width: 10px; 
 
} 
 

 
.slidingVertical span:nth-child(1) { animation-delay: 0s; } .slidingVertical span:nth-child(2) { animation-delay: 2s; } .slidingVertical span:nth-child(3) { animation-delay: 4s; } .slidingVertical span:nth-child(4) { animation-delay: 6s; } .slidingVertical span:nth-child(5) { animation-delay: 8s; } .slidingVertical span:nth-child(6) { animation-delay: 10s; } .slidingVertical span:nth-child(7) { animation-delay: 12s; } .slidingVertical span:nth-child(8) { animation-delay: 14s; } .slidingVertical span:nth-child(9) { animation-delay: 16s; } .slidingVertical span:nth-child(10) { animation-delay: 18s; } 
 

 
@keyframes elements { 
 
    0% { 
 
    opacity: 0; 
 
    max-width: 10px; 
 
    } 
 
    
 
    6%, 9% { 
 
    opacity: 1; 
 
    max-width: 400px; 
 
    } 
 
    
 
    12%, 100% { 
 
    opacity: 0; 
 
    max-width: 10px; 
 
    } 
 
}

<section class="wrapper"> 
 

 
<h2 class="sentence">Janie is a lovely girl because she is 
 
<div class="slidingVertical"> 
 
    <span>amazing</span> 
 
    <span>beautiful</span> 
 
    <span>cute</span> 
 
    <span>honest</span> 
 
    <span>cool</span> 
 
    <span>brave</span> 
 
    <span>wild</span> 
 
    <span>interesting</span> 
 
    <span>local</span> 
 
    <span>sexy</span> 
 
</div> 
 
<p>and cool.</p> 
 
</h2> 
 

 
</section>

Alternativ habe ich die Animation in einer Art und Weise wieder aufzubauen es einfacher zu lassen, es ist Geschwindigkeit zu kontrollieren. Im folgenden Beispiel müssen Sie nur den Animationslängenwert (animation: elements 30s infinite linear;) ändern, um die Geschwindigkeit zu steuern (es gibt keine individuelle Verzögerung für jedes Wort).

body { 
 
    background: plum; 
 
} 
 

 
.sentence { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    height: 80px; 
 
    vertical-align: top; 
 
} 
 

 
.sentence p { 
 
    display: inline-block; 
 
} 
 

 
.slidingVertical { 
 
    display: inline-block; 
 
    vertical-align: text-top; 
 
} 
 

 
.slidingVertical span { 
 
    display: block; 
 
    height: 40px; 
 
    margin-bottom: -40px; 
 
    overflow: hidden; 
 
} 
 

 
.slidingVertical span:before { 
 
    content: ''; 
 
    opacity: 1; 
 
    display: inline-block; 
 
    max-width: 10px; 
 
    overflow: hidden; 
 
    animation: elements 30s infinite linear; 
 
} 
 

 
@keyframes elements { 
 
    0% { 
 
content: 'sexy'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    4% { 
 
content: 'sexy'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    5% { 
 
content: 'sexy'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    6% { 
 
content: 'amazing'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    10% { 
 
content: 'amazing'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    14% { 
 
content: 'amazing'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    15% { 
 
content: 'amazing'; 
 
opacity: 0; 
 
     max-width: 10px; 
 
    } 
 
    16% { 
 
content: 'beautiful'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    20% { 
 
content: 'beautiful'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    24% { 
 
content: 'beautiful'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    25% { 
 
content: 'beautiful'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    26% { 
 
content: 'cute'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    30% { 
 
content: 'cute'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    34% { 
 
content: 'cute'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    35% { 
 
content: 'cute'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    36% { 
 
content: 'honest'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    40% { 
 
content: 'honest'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    44% { 
 
content: 'honest'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    45% { 
 
content: 'honest'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    46% { 
 
content: 'cool'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    50% { 
 
content: 'cool'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    54% { 
 
content: 'cool'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    55% { 
 
content: 'cool'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    56% { 
 
content: 'brave'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    60% { 
 
content: 'brave'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    64% { 
 
content: 'brave'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    65% { 
 
content: 'brave'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    66% { 
 
content: 'wild'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    70% { 
 
content: 'wild'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    74% { 
 
content: 'wild'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    75% { 
 
content: 'wild'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    76% { 
 
content: 'interesting'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    80% { 
 
content: 'interesting'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    84% { 
 
content: 'interesting'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    85% { 
 
content: 'interesting'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    86% { 
 
content: 'local'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    90% { 
 
content: 'local'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    94% { 
 
content: 'local'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
    95% { 
 
content: 'local'; 
 
opacity: 0; 
 
max-width: 10px; 
 
    } 
 
    96% { 
 
content: 'sexy'; 
 
opacity: 0; 
 
max-width: 10px;   
 
    } 
 
    100% { 
 
content: 'sexy'; 
 
opacity: 1; 
 
max-width: 400px; 
 
    } 
 
}

<section class="wrapper"> 
 

 
<h2 class="sentence">Janie is a lovely girl because she is 
 
<div class="slidingVertical"> 
 
    <span></span> 
 
</div> 
 
<p>and cool.</p> 
 
</h2> 
 

 
</section>

Quelle

2016-04-06 15:03:20

aktualisiert Übergang: Wieder überprüfen Sie bitte; –

Kannst du es langsamer machen? Wie kontrollierst du die Geschwindigkeit? – ChosenJuan

Sie haben hier 3 Änderungspunkte, um die Geschwindigkeit zu steuern: Elemente ** 10s **, Animationsverzögerung: ** 0s **; und die Keyframes-Position ** 5%, 10% 15% **; aber sie müssen alle in Harmonie sein; Wenn du einen editierst, musst du auch die anderen editieren, um den Cicle zu vervollständigen, ohne irgendwelche Überlappungen/Sprünge. –

Wie kann ich meine CSS Animated Text Übergänge verlangsamen?

Antwort

Verwandte Themen