<div class="steps">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<p class="css-typing">Это анимация с использованием временной функции "steps"!</p>
div {
width:150px;
height: 150px;
background:lightblue;
position:relative;
}
i {
position:absolute;
width: 6px;
height: 6px;
border-radius:100%;
background:darkblue;
left:0;
top:0;
animation: steps 2s infinite;
}
.steps i {
animation-timing-function: steps(10,end);
}
@keyframes steps {
0% {
left:0;
top:0;
}
100% {
left:145px;
top:145px;
}
}
i:nth-child(2) {animation-delay:.1s;}
i:nth-child(3) {animation-delay:.2s;}
i:nth-child(4) {animation-delay:.3s;}
i:nth-child(5) {animation-delay:.4s;}
i:nth-child(6) {animation-delay:.5s;}
i:nth-child(7) {animation-delay:.6s;}
i:nth-child(8) {animation-delay:.7s;}
i:nth-child(9) {animation-delay:.8s;}
i:nth-child(10){animation-delay:.9s;}
#box {
width:100px;
height: 100px;
background:blue;
margin:10%;
position:relative;
animation:size 2s 1 ease alternate both;
}
.css-typing {
width: 30em;
white-space:nowrap;
overflow:hidden;
animation: type 5s steps(50, end) 1, blick 0.5s steps(5,end) 5s 10;
font-size:16px;
font-family: sans-serif;
border-right: 1px solid #000;
}
@keyframes type{
0% { width: 0; }
}
@keyframes blick {
0% {
border-right: 1px solid #000;
}
100% {
border:none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.