Kerfuffle on the Planet of the Apes (part 3)

This header has three main SVG elements (or groups of SVGs): the Century City background, two groups of rampaging gorillas, and Caesar. Apes. Together. Strong. These elements all include subtle CSS animations or transitions.

Lighting up Century City

Streetlights in the Century City background pulsate because, I suppose, the electricity grid can’t be relied upon during an ape uprising. This SVG include two circle primitives for the streetlights. They’re blurry thanks to an SVG filter effect:

<svg>

<defs>
<filter id="lights" width="265%" height="265%" x="-80%" y="-80%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="25"/>
</filter>
</defs>

<circle class="lights" fill="#bdb975" filter="url(#lights)"/>
<circle class="lights" fill="#bdb975" filter="url(#lights)"/>

</svg>

First, I defined a simple CSS animation with flashes the lights’ opacity between 0 and 1:

@keyframes flash {
from { opacity: 1; }
to { opacity: 0; }
}

Then, the animation infinitely flashes the opacity over two seconds:

.lights-1 {
opacity: 1;
animation: flash 2s ease infinite alternate; }

The second time value on the second light adds a one-second delay before the flashing starts:

.lights-2 {
opacity: 1;
animation: flash 2s ease 1s infinite alternate; }

I used the same flashing animation for the rain effect. (Why does it always rain at night in action movies?)

<svg>
<path class="rain" fill="none" stroke="#364A71" stroke-width="5" d="…"/>
</svg>

.rain {
opacity: 1;
animation: flash .5s ease 1s infinite alternate; }

I know I can do better creating realistic rain, but that can be a job for another day (or night.)

Filtering those gorillas

I wanted my gang of gorillas to be in shadow when they’re further into the background, so I added a CSS filter to reduce their brightness to 0 and a transition to fade in its change later:

#gorillas {
filter: brightness(0);
transition: filter .5s ease-in-out; }

Then, I reset the brightness to 1 to bring the gorillas into the light using the only media query in this design:

@media (min-width:64em) {
#gorillas {
filter: brightness(1); }
}

Hopping mad gorillas

My gorillas are clearly hopping mad about something. They’re in two groups (gorillas-1 and gorillas-2) which are themselves children of a division with an ID of gorillas:

<div id="gorillas">
  <div id="gorillas-1">
  <div><svg>…</svg></div>
  …
  </div>
	
  <div id="gorillas-2">
  <div><svg>…</svg></div>
  …
  </div>
</div>

To make my gorillas hop, I first defined a CSS animation which bounces elements up and down using a vertical translate transform:

@keyframes hop {
70% { transform:translateY(0%); }
80% { transform:translateY(-12px); }
90% { transform:translateY(0%); }
95% { transform:translateY(-6px); }
97% { transform:translateY(0%); }
99% { transform:translateY(-3px); }
100% { transform:translateY(0); }
}

Then, I applied that animation to all gorillas:

#gorillas-1 > *, 
#gorillas-2 > * {
animation: hop 2s ease infinite; }

Before adding an animation delay to each individual gorilla:

#gorillas-1 > :nth-child(1) {
animation-delay: 0; }

#gorillas-1 > :nth-child(2) {
animation-delay: .25s; }

#gorillas-1 > :nth-child(3) {
animation-delay: .5s; }

…

To finish off my gorilla animations for browsers which accept the -webkit- vendor-specific prefix, I reflected the gorillas on the rain-soaked pavement using reflections and a fading linear gradient:

#gorillas-1 > *,
#gorillas-2 > * {
-webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.5)); }

Focussing on Caesar

As the main protagonist and leader of the ape rebellion in Conquest of the Planet of the Apes and Kerfuffle on the Planet of the Apes, Caesar is upfront and centered. First, I placed Caesar in a parent division:

<div id="cornelius-zira">
  <svg id="#caesar">…</svg>
</div>

Then, I moved him slightly to the left using a negative horizontal translate transform and added a smooth transition for when he moves back into position and towards the viewer when they hover over Caesar’s parents’ division:

#caesar {
transform: translateX(-25px) scale(1);
transform-origin: 0 50%;
transition: transform .5s ease-in-out; }

#cornelius-zira:hover #caesar {
transform: translateX(25px) scale(1.05); }

I definitely spent too much time on Kerfuffle on the Planet of the Apes, but I had fun making it, and it made me even more excited about seeing Kingdom of the Planet of the Apes. I know I’m going to love it.

Catch up on parts one and two.