<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : LA_falling-letters.html |
| Author : Leonard Anders |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>falling letters</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 10vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
}
/* defines the parent class */
.parent-class{
/* defines the relative position to the body */
position: relative;
/* defines the size and position of the canvas */
display: inline-block;
top: -25vh;
left: 2vw;
}
.class-1 {
/* defines absolute position to the parent class */
position: absolute;
/* changes pivot point for the rotation */
transform-origin: bottom;
/* assigns position on the canvas */
left: -2em;
/* assigns the animation to the element, its duration and repeats */
animation: animation1 5s infinite, animation2 5s cubic-bezier(.74,.03,.99,.49) infinite;
/* defines the animation fill mode */
animation-fill-mode: forwards;
}
.class-2 {
position: absolute;
left: -1.3em;
transform-origin: bottom;
animation: animation1 5s 0.3s infinite, animation2 5s cubic-bezier(.74,.03,.99,.49) 0.3s infinite;
animation-fill-mode: forwards;
}
.class-3{
position: absolute;
left: -0.6em;
transform-origin: bottom;
animation: animation1 5s 0.6s infinite, animation2 5s cubic-bezier(.74,.03,.99,.49) 0.6s infinite;
animation-fill-mode: forwards;
}
.class-4{
position: absolute;
left: 0.1em;
transform-origin: bottom;
animation: animation1 5s 0.9s infinite, animation2 5s cubic-bezier(.74,.03,.99,.49) 0.9s infinite;
animation-fill-mode: forwards;
}
.class-5{
position: absolute;
left: 0.8em;
transform-origin: bottom;
animation: animation1 5s 1.2s infinite, animation2 5s cubic-bezier(.74,.03,.99,.49) 1.2s infinite;
animation-fill-mode: forwards;
}
/* defines the animation name for the drop */
@keyframes animation1 {
/* defines the keyframe animation starting point */
0%, 18%{ translate: 0% 0; }
/* defines the keyframe animation ending point */
25%, 100% { translate: 0 350%; }
}
/* defines the animation name for the flip */
@keyframes animation2 {
/* defines the keyframe animation starting point */
0%, 36%{ transform: rotateX(0deg); }
/* defines the keyframe animation flipping angle */
80%, 100% { transform: rotateX(90deg); }
}
</style>
</head>
<body>
<div class="parent-class">
<div class="class-1">a</div>
<div class="class-2">h</div>
<div class="class-3">h</div>
<div class="class-4">h</div>
<div class="class-5">!</div>
</div>
</body>
</html>
