I have this fiddle: https://jsfiddle.net/8uwu59sL/ Currently it's typing out every line at the same time, but I'd like to make it type them out one line after another with a second long delay in between lines.
This is the HTML:
<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<br>
<p>Final/Blinking Line<span>|</span></p>
And this is the CSS:
body{
background: #000;
padding-top: 10px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}
p:nth-child(2){
animation: type2 8s steps(60, end);
}
p a{
color: lime;
text-decoration: none;
}
span{
animation: blink 1s infinite;
}
@keyframes type{
from { width: 0; }
}
@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
@keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}
I was wondering, how do I do this? Also, is it possible to have the last line ("Final/Blinking Line") blinking slowly, and have the "|" blinking too, but at a different rate? Thanks in advance for any help with this!
PURE CSS APPROACH:
To achieve your first requirement, you need to use the css selector :nth-child()
. How to use it: element:nth-child(n) where n represents the index of the child element in its parent.
For the other one you would need to separate your text and the "|" each in a separate <span>
to target them individually with a different animation duration (speed).
EDIT:
If you can use JQuery and you're planning on adding more lines over time, I would recommend using DaniP's answer, it's way more scalable, without worrying about adding a new css selector for every line. If you want to target a specific line to change something like animation-duration you could just target them individually adding an id and using css.
body {
background: #000;
padding-top: 10px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
opacity: 0;
animation: type 4s steps(60, end) forwards;
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
margin-bottom: 25px;
}
p:nth-child(7) {
animation-delay: 6s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
span {
animation: blink 1.8s infinite 8s;
}
p a {
color: lime;
text-decoration: none;
}
@keyframes type {
0% {
opacity: 1;
}
100% {
width: 30em;
opacity: 1;
}
}
@keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<p><span>Final/Blinking Line</span> <span>|</span>
</p>
You need to manage the animation-delay
value, one way is setting that for each one on CSS with :nth-child
selector but if you can use Jquery, try this:
$('p').each(function(i) {
$(this).css({
"animation-delay": i + "s"
})
});
body {
background: #000;
padding-top: 10px;
}
p {
width: 0;
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
animation: type 4s steps(60, end) forwards;
}
p a {
color: lime;
text-decoration: none;
}
span {
animation: blink 1s infinite;
}
@keyframes type {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<br>
<p>Final/Blinking Line<span>|</span>
</p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With