<div class="title">
<h1 aria-label="Alien">
<div class="letter" aria-hidden="true">A<i></i><i></i><i></i></div>
<div class="letter" aria-hidden="true">L<i></i><i></i></div>
<div class="letter" aria-hidden="true">I</div>
<div class="letter" aria-hidden="true">
E <i></i><i></i><i></i><i></i>
</div>
<div class="letter" aria-hidden="true">N<i></i><i></i><i></i></div>
</h1>
<p>a Ridley Scott film</p>
</div>
@font-face {
font-family: "HomepageBaukasten";
src: url("./homepagebaukasten-bold.ttf");
}
:root {
--text-color-initial: #08146d;
--text-color-final: white;
--animation-delay-title-reveal: 12.5s;
--animation-delay-segment: 4s;
--animation-duration-segment: 3.75s;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
display: grid;
height: 100dvh;
margin: 0;
background-color: black;
place-items: center;
}
.title {
width: 100%;
max-width: 1920px;
aspect-ratio: 1920 / 1080;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background: black;
background-image: url("img/bg.webp");
background-size: 200%;
background-position: 0% 50%;
animation-name: bg-scroll, fadeout;
animation-duration: 210s, 1s;
animation-timing-function: linear, ease-out;
animation-fill-mode: forwards, forwards;
animation-delay: 0s, 120s;
}
@keyframes bg-scroll {
to {
background-position: 200% 50%;
}
}
@keyframes fadeout {
to {
opacity: 0;
}
}
h1 {
color: white;
font-family: "HomepageBaukasten";
font-size: clamp(1.5rem, 6vw + 0.5rem, 6rem);
margin: 0 10%;
margin-block-start: 1.25rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
}
p {
color: var(--text-color-final);
font-family: Roboto, sans-serif;
font-size: clamp(1rem, 2vw + 0.25rem, 2.25rem);
place-self: center;
opacity: 0;
animation: show-credit 4s;
animation-timing-function: ease-in-out;
animation-delay: 5s;
}
@keyframes show-credit {
10%,
100% {
opacity: 1;
}
}
.letter {
position: relative;
width: min-content;
color: transparent;
}
.letter i {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
animation: reveal-bg-color var(--animation-duration-segment);
animation-timing-function: linear;
animation-fill-mode: forwards;
}
/* Letter A */
.letter:nth-of-type(1) {
justify-self: start;
}
/* horizontal bar of A */
.letter:nth-of-type(1) i:nth-of-type(1) {
clip-path: polygon(9.32% 71%, 17.78% 55%, 80% 55%, 90% 71%);
animation-fill-mode: forwards;
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 10) +
(var(--animation-delay-segment) * 10) + 0.5s
);
}
/*inside leg of A */
.letter:nth-of-type(1) i:nth-of-type(2) {
clip-path: polygon(38% 18.6%, 63% 18.6%, 99.08% 85%, 76% 85%);
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 5) +
(var(--animation-delay-segment) * 5)
);
}
/*outer leg of A*/
.letter:nth-of-type(1) i:nth-of-type(3) {
clip-path: polygon(37.86% 18.6%, 62% 18.6%, 23.54% 85%, 0% 85%);
animation-delay: calc(
var(--animation-delay-title-reveal) + var(--animation-duration-segment) +
var(--animation-delay-segment)
);
}
/* Letter L */
/* vertical bar of L */
.letter:nth-of-type(2) i:nth-of-type(1) {
clip-path: polygon(8.24% 18.07%, 40% 18.1%, 40% 84%, 7.82% 84%);
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 3) +
(var(--animation-delay-segment) * 3)
);
}
/* horizontal bar of L */
.letter:nth-of-type(2) i:nth-of-type(2) {
clip-path: polygon(39% 69%, 100% 69%, 100% 84%, 39% 84%);
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 8) +
(var(--animation-delay-segment) * 8)
);
}
/* letter I */
.letter:nth-of-type(3) {
animation: reveal-color var(--animation-duration-segment);
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: var(--animation-delay-title-reveal);
}
/* letter E */
/* vertical bar of E */
.letter:nth-of-type(4) i:nth-of-type(1) {
display: inline-block;
position: absolute;
left: 12%;
top: 17%;
width: 30%;
height: 67%;
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 4) +
(var(--animation-delay-segment) * 4)
);
}
/* top horizontal bar of E*/
.letter:nth-of-type(4) i:nth-of-type(2) {
display: inline-block;
position: absolute;
left: 42%;
top: 17%;
width: 56.5%;
height: 16.25%;
}
/* mid horizontal bar of E*/
.letter:nth-of-type(4) i:nth-of-type(3) {
display: inline-block;
position: absolute;
left: 42%;
top: 42.5%;
width: 49.5%;
height: 15.8%;
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 10) +
(var(--animation-delay-segment) * 10)
);
}
/* bottom horizontal bar of E*/
.letter:nth-of-type(4) i:nth-of-type(4) {
display: inline-block;
position: absolute;
top: 68%;
left: 42%;
width: 56.5%;
height: 16.25%;
}
.letter:nth-of-type(4) i:nth-of-type(2),
.letter:nth-of-type(4) i:nth-of-type(4) {
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 7) +
(var(--animation-delay-segment) * 7)
);
}
/* inner leg of N */
.letter:nth-of-type(5) {
justify-self: end;
}
/* outer leg of N */
.letter:nth-of-type(5) i:nth-of-type(1) {
clip-path: polygon(67% 18.01%, 92% 18.05%, 92% 83.86%, 67% 83.87%);
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 6) +
(var(--animation-delay-segment) * 6)
);
}
.letter:nth-of-type(5) i:nth-of-type(2) {
clip-path: polygon(7% 18%, 31% 18%, 31% 84%, 10% 84%);
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 9) +
(var(--animation-delay-segment) * 9)
);
}
/* diagonal leg of N */
.letter:nth-of-type(5) i:nth-of-type(3) {
clip-path: polygon(6% 19.14%, 32% 19.18%, 93% 83%, 68% 83%);
animation-delay: calc(
var(--animation-delay-title-reveal) +
(var(--animation-duration-segment) * 2) +
(var(--animation-delay-segment) * 2)
);
}
@keyframes reveal-color {
0% {
color: transparent;
}
33%,
100% {
color: var(--text-color-initial);
opacity: 1;
}
100% {
color: var(--text-color-final);
}
}
@keyframes reveal-bg-color {
0% {
background-color: transparent;
}
33%,
100% {
background-color: var(--text-color-initial);
}
100% {
background-color: var(--text-color-final);
}
}
This is a CSS animation of the title sequence for the movie Alien (1979).
This is a slow paced animation, watch for 20 seconds plus to appreciate what it is! I did not include the eerie music but it plays a big part!
You can read my tutorial on the design and implementation of the animation.