A pure css Text Reveal Block
A Pen by Mattia Astorino on CodePen.
<h1 class="reveal-text"> | |
I'm here. | |
</h1> | |
<span class="note"> | |
On Firefox enable <pre>layout.css.clip-path-shapes</pre>. | |
</span> |
A pure css Text Reveal Block
A Pen by Mattia Astorino on CodePen.
// ••·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•• | |
// Configuration: | |
$animation-delay: 2s; | |
$duration: 800ms; | |
$iterations: 1; | |
// ••·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•• | |
body { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
background-color: #8ce2ea; | |
flex-direction: column; | |
} | |
.reveal-text, | |
.reveal-text:after { | |
animation-delay: $animation-delay; | |
animation-iteration-count: $iterations; | |
animation-duration: $duration; | |
animation-fill-mode: both; | |
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); | |
} | |
.reveal-text { | |
position: relative; | |
font-size: 17vw; | |
display: block; | |
user-select: none; | |
animation-name: reveal-text; | |
color: #FFF; | |
white-space: nowrap; | |
cursor: default; | |
&:after { | |
content: ""; | |
position: absolute; | |
z-index: 999; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background-color: #f2f98b; | |
transform: scaleX(0); | |
transform-origin: 0 50%; | |
pointer-events: none; | |
animation-name: revealer-text; | |
} | |
} | |
@keyframes reveal-text { | |
from { | |
clip-path: inset(0 100% 0 0); | |
} | |
to { | |
clip-path: inset(0 0 0 0); | |
} | |
} | |
@keyframes revealer-text { | |
0%, 50% { | |
transform-origin: 0 50%; | |
} | |
60%, 100% { | |
transform-origin: 100% 50%; | |
} | |
50% { | |
transform: scaleX(1); | |
} | |
60% { | |
transform: scaleX(1); | |
} | |
100% { | |
transform: scaleX(0); | |
} | |
} | |
.note { | |
position: fixed; | |
bottom: 16px; | |
font-size: 12px; | |
color: rgba(0,0,0,0.3); | |
pre { | |
display: inline-block; | |
} | |
} |
insane