Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FlyIn Movie Title

FlyIn Movie Title

Text animated with CSS to recreate the opening titles of a movie.

A Pen by Vuild on CodePen.

License.

<div id="fly-in">
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body {
background-color: #111;
background-image: radial-gradient(#333, #111);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
text-align: center;
width: 100vw;
font-weight: 700;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
}
#fly-in {
font-size: 4em;
margin: 40vh auto;
height: 20vh;
text-transform: uppercase;
}
#fly-in span {
display: block;
font-size: .4em;
opacity: .8;
}
#fly-in div {
position: fixed; <!--codepen.io/h-kod/-->
margin: 2vh 0;
opacity: 0;
left: 10vw;
width: 80vw;
animation: switch 32s linear infinite;
}
#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}
@keyframes switch {
0% { opacity: 0;filter: blur(20px); transform:scale(12)}
3% { opacity: 1;filter: blur(0); transform:scale(1)}
10% { opacity: 1;filter: blur(0); transform:scale(.9)}
13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
80% { opacity: 0}
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.