Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Feb 1, 2017

Embed
What would you like to do?
Pure CSS Text Reveal
<h1 class="reveal-text">
I'm here.
</h1>
<span class="note">
On Firefox enable <pre>layout.css.clip-path-shapes</pre>.
</span>
// ••·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·••
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.