<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : TD_text-fade-out.html |
| Author : Tessa Sophie Dürbusch |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-fade-out dynamic</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 6vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
}
span {
/* defines a name for the @keyframes animation */
animation-name: opacity;
/* defines how long the animation takes to complete one cycle */
animation-duration: 15s;
/* defines how the animation will progress over one cycle of its duration */
animation-timing-function: ease-in-out;
/* defines whether or not the animation should play in reverse on alternate cycles */
animation-direction: normal;
/* defines the number of times an animation cycle is played */
animation-iteration-count: infinite;
}
@keyframes opacity {
/* defines how strong the color of the text is at a certain point in the animation */
0% {opacity: 100%;}
10% {opacity: 0%;}
50% {opacity: 0%;}
90% {opacity: 0%;}
100% {opacity: 100%;}
}
span {
/* determines the type of box or boxes that are generated for an element */
display: inline-block;
}
/* defines when the animation will start */
.class-1 {animation-delay: 1s}
.class-2 {animation-delay: 2s;}
.class-3 {animation-delay: 3s;}
.class-4 {animation-delay: 4s;}
.class-5 {animation-delay: 5s;}
.class-6 {animation-delay: 6s;}
.class-7 {animation-delay: 7s;}
.class-8 {animation-delay: 8s;}
.class-9 {animation-delay: 9s;}
</style>
</head>
<body>
<p>
<span>One</span>
<span class="class-1">small</span>
<span class="class-2">text</span>
<span class="class-3">that</span>
<span class="class-4">slowley</span>
<span class="class-5">starts</span>
<span class="class-6">to</span>
<span class="class-7">disappear</span>
<span class="class-8">into</span>
<span class="class-9">nothing</span>
</p>
</body>
</html>
