title
A prototype
a
b
c
d
e
f
g
body{ margin:0; height:100vh; text-align:center; display:flex; justify-content:center; align-items:center; background:lightblue; font-size:10vh; font-weight:bold; } span{ position:relative; } span:nth-child(1){ animation: a1 3s ease-in-out 0s backwards; } @keyframes a1 { 0% {top: -100px; left:-50px;} 100% {top: 0px; left:0;} } span:nth-child(2){ animation: a2 5s ease-in-out 0s backwards; } @keyframes a2 { 0% {top: -120px; left:20px;} 50% {top: -20px; left:-20px;} 100% {top: 0px; left:0;} } span:nth-child(3){ animation: a3 4.5s ease-in-out 0s backwards; } @keyframes a3 { 0% {top: -80px; left:90px;} 70% {top: -30px; left:-0px;} 100% {top: 0px; left:0;} } span:nth-child(3){ animation: a3 5.5s ease-in-out 0s backwards; } @keyframes a3 { 0% {top: -380px; left:-90px;} 20% {top: -10px; left:-50px;} 100% {top: 0px; left:0;} }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code