Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.slim
Created Nov 9, 2017

Embed
What would you like to do?
Netflix style text animation with CSS
.txt contenteditable="true"
| TYPE HERE

Netflix style text animation with CSS

Netflix style text animation with CSS and a SCSS function to have the long text shadow

A Pen by Nooray Yemon on CodePen.

License.

@function makelongshadow($length,$angle) {
$val: 0px 0px transparent;
@for $i from 1 through $length {
$val: #{$val}, #{$i}px #{$i*$angle}px #aaa;
}
@return $val;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:700,900');
body {
background: radial-gradient(#fff, #aaa);
background-size: 100vw 100vh;
overflow: hidden;
padding-top: 40vh;
}
.txt {
text-align: center;
font-family: 'Roboto';
font-size: 12vmin;
font-weight: 700;
animation: netflix_style 3.5s infinite;
outline: none;
white-space: nowrap;
}
@keyframes netflix_style {
0% {
text-shadow: makelongshadow(100,1);
color:#f3f3f3;
transform: scale(1.5, 1.5);
}
10% {
text-shadow: makelongshadow(100,1.5);
color:#f3f3f3;
transform: scale(1.5, 1.5);
}
15% {
color:#f3f3f3;
}
20% {
color:#e90418;
text-shadow: none;
transform: scale(1.1, 1.1);
}
75% {
opacity: 1;
}
80% {
opacity: 0;
color:#e90418;
transform: scale(0.85, 0.9);
}
100% {
opacity: 0;
}
}
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.