CSS Animation Rocks

Twitter's "fave" animation

2015-01-17T00:00:00Z

Twitter recently updated the design of their "fave" (also known as "fav") button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here's how to recreate the animation using the CSS animation steps timing function.

Update: Heart

The following technique can also be used with the new "Heart" animation, as it's handled in a similar way:

See the live example on CodePen.

Illusion of movement

The effect is similar to the old Zoetrope devices, which presented a series of illustrations in sequence around a cylinder. Instead of a cylinder, we display a flat series of images inside an element.

Demo

Hover the star to see the animation:

In this example we begin by creating a series of images that will make up the animation. In this case we are using part of the image set from Twitter's fave icon animation:

To animate these frames, we'll need to put them into a single line. This file has them in a single row, which means we can transition from the first frame to the last frame by positioning the background:

Steps() timing function

With most timing functions such as ease or cubic-bezier, the transition animates smoothly between the start and end states. The steps timing function is different. Instead of a smooth transition, it divides up the transition into a number of steps and moves sharply between each step.

To begin we set up the HTML:

<section class="fave"></section>

Background image

With that in place we can add a little styling and position the background image:

.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

The hover state is added, which is when we specify that the background position be moved to the end of the series of images:

.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

Note the second rule, specifying the transition. In this case we want to transition the background property, run the transition for a duration of one second, make use of the steps timing function. The steps part includes the value 55, as there are 55 frames in the animation.

The effect is that when we hover over the element, it jumps through the transition in 55 equal steps.

Why not a gif?

Animated gifs could potentially be used but in this case would not be a great fit. The file size is generally worse and frame rate is difficult to control. With this method we can pause, rewind, or make all sorts of other adjustments to the animation using CSS.

Other uses of "steps()"

Animating background sprites is just one use of the steps timing function. Anything that needs to be animated in a series of discrete steps is a good fit for it. You could use it to create a ticking clock for example.

Cheatsheet

If you enjoyed this article, you can share it on Twitter or save this handy summary cheatsheet:

Animating pseudo-elements

2015-02-03T00:00:00Z

Pseudo-elements are like getting extra DOM elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML, and they can be animated. In this post we'll use a pseudo-element to add a little visual flair to a button.

Pseudo-elements

Within CSS, we can specify a pseudo-element using ::before or ::after. The pseudo-element is then inserted within your element, between the element and any content. Since it acts as an element of it's own, it can be styled, positioned and more. The code looks a bit like this:

.pebble::before {
  ...
}
.pebble::after {
  ...
}

At this point, our .pebble element has two virtual elements attached, and we can style them as needed.

Note on "::" versus ":"

It's generally accepted that we use the double colon :: to denote pseudo-elements (as opposed to pseudo-classes like :hover, :first-child). If you're adding IE8 support, it's best to use the single : instead. All other browsers and newer versions of IE support the double.

Don't forget "content"

When adding pseudo-elements, one thing to keep in mind is the need to specify the content property before they can be made visible on the page. As the pseudo-element is created in an content-less state, we can trick it into appearing by using an empty content like so:

.pebble::before {
  content: ""
  ... more styling goes here...
}

This should make sure the element is visible on screen.

Example: Shiny button

For this example we'll use a pseudo-element to create a shiny effect on hovering over a button. Here's an example of it in action (hover or tap to see effect).

To begin, some HTML:

<button>Oooh SHINY</button>

Since we're using pseudo-elements, we won't need any more HTML than this to get going. You may want to add a class to the button if styling more than one type on a page, but for now we'll use the generic element for simplicity.

Adding the sheen effect

The shiny sheen effect is a linear gradient that passes across the button. To create this we'll use the after pseudo-element, and position it in a beginning position outside the button:

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

The sheen effect is made up of a gradient from the button colour to white and back again. At this point it is now sitting outside the button.

We'll need to hide the sheen layer so that it only shows on hover. To do this we'll set the button's overflow property to hidden. Since the pseudo-element is within the button, this means it's positioning outside the button won't be visible.

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

I've put in some other styling also to give the button it's own look. One thing to point out, is the use of position: relative. I've added this property so that the absolutely positioned pseudo-element will exist within the button. Without specifying the position, an absolutely positioned item will position within a parent element.

Adding the animation

Since we'll be using an animation in this example, there are two steps involved. The first is to tell the browser to use an animation on hover. Then we'll set out exactly what that animation is using keyframes.

Adding the hover state can be done by stacking the after onto the hover like so:

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

Here we are telling the browser than on hover, the after pseudo-element is to have an animation. The animation, called sheen, lasts one second and stops at the end without repeating.

The order matters here. Using ::after:hover won't work as it'll be telling the browser to react to the hover state of the pseudo-element itself.

I've also added the focus state. This means that viewers tabbing through the page will see the sheen effect as well, without needing to hover. (Thank you, Šime Vidas, for the tip)

Let's specify keyframes for this animation:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

We only need one keyframe in this case. Since the starting position (0%) is implied by the pseudo-element's starting position, we only describe the end position. In this case the end position is across at the top-right of the button. The browser will then animate the sheen effect across for us.

Browser considerations

The animation property is well supported, as are pseudo-elements. It's always good to make sure and include -webkit and -moz prefixes for the keyframes and any transforms.

Animating List Items

2015-02-12T00:00:00Z

When parts of a web page change, adding some animation is a good way to help your viewers understand what's going on. Animations can announce the arrival of new content, or draw attention to content that's in the process of being removed. In this article we'll look at how this can be used to help introduce new content, by showing and hiding items in a list.

List item
List item

Introducing content

Animation can be useful when helping visitors understand when things change on your site. When content is added or removed without any animation, they can miss sudden changes and be confused. Adding subtle animations can avoid this and help by "announcing" that something is going to leave the page or be introduced to it.

One example of adding or removing content is managing the content of a list. Most of the animations can be used for other sorts of content. If you find them useful, or have other ideas to add, do get in touch, we love to hear your thoughts.

Setting up the HTML

To get started we'll use a pre-filled list and a button to add new items to the list.

<ul id="list">
  <li class="show">List item</li>
  <li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

A few things to note. Firstly we have two IDs in the HTML. Generally we don't use IDs for styling, as they can introduce problems with their specificity. However they're useful when using JavaScript.

The initial items have the class "show", as this is a class we'll use later to add the animation effect.

A little JavaScript

For the purpose of the demo we'll create a little JavaScript to add a new item to the list, then add the "show" class so that the animation can take place. There's a reason for using this two-step process. If the list items were added in a visible state, there wouldn't be any time for the transition to take place.

We could get around this by using an animation on the li elements, but this would be more difficult to override when removing the elements with another animation.

/*
 * Add items to a list - from cssanimation.rocks/list-items/
 */
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

No animation

At it's most basic we can write some CSS to show the list items. We're using the show class as a way of setting them as visible, so removing the show class should also cause them to disappear.

li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

In these styles we're setting up the li elements to look like rectangles, without the bullet points and giving them a height of 0, a margin of 0 and set overflow to hidden. This is so that they will appear invisible until we apply a show class.

The show class applies a height and margin. Since we're not using animation yet, the items should appear suddenly on the page, like so. Also try pressing the list items to see them disappear.

List item
List item

Fade

As a first animation we'll add a simple fade effect. The list items appear a little more gradually than before. Visually this still looks a little clunky but has the benefit of giving viewers longer to notice that something is happening.

List item
List item

To add the effect I've created a separate snippet of CSS. To have this apply to the list, apply the class fade to a container surrounding your list.

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

Slide down & Fade

The sudden jump each time an item is added or removed is a litle jarring. Let's have the height adjust as well, to create a smoother sliding effect.

List item
List item

The difference between this and the fade class above is only that the height: 2em has been removed. Since the show class contains a set height (inherited from the first CSS snippet), it will transition the height automatically.

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

Swinging in

Along with fading and sliding, we can go further by adding a little 3D effect. Browser can transform elements in more than the X or Y directions, useful for adding depth to scenes.

List item
List item

To set this up, we need to define the containing section as a stage within which the 3D transitions take place. We do this by giving it a perspective value.

Perspective in CSS is the depth of the scene. A lower number means a more shallow perspective, with more extreme angles. It's worth playing with this value to find a look that works for you.

.swing {
  perspective: 100px;
}

Next we set up the li elements to transform into place. We'll use opacity to create a fade effect as before, but add in a transform to rotate the li into place.

.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

In this example we're beginning with the li rotated back by 90 degrees. When the show class it added, this transform is set to none, allowing it to transition into place. To give it a swinging effect I've used the cubic-bezier timing function.

Swinging from side

We can tweak this effect to create different styles quite easily. Here's an example where the items swing in from the side.

List item
List item

To create this effect we only need change the axis of rotation.

.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

All we've changed is rotateX to rotateY.

Prefixes and browser testing

The code included above does not include any prefixes, for readability. It's strongly recommended to add prefixes to support browsers that need the -webkit prefix or others. I use Autoprefixer to save worrying about these things.

As these animations are layered on top of the basic show / hide mechanism, they should degrade gracefully on browsers that don't support the animations. Testing on various devices and browsers is important but most modern browsers should be able to support these animations.

Baymax in CSS

2015-02-18T00:00:00Z

Let's use CSS to create the Baymax character from the movie Big Hero 6.

In this post we'll be animating a background image, as well as a subtle animation timing effect, and make a CSS demo out of one single HTML element.

You can see it full screen here.

Single element

By making use of pseudo-elements, we'll be able to create the face parts using one HTML element.

<div class="baymax"></div>

Styling

To set the stage we'll add a subtle gradient to the screen to make it look like a curved, white head. For this we'll use a radial gradient on the body.

body {
  background: radial-gradient(circle at

center, #fff, #fff 50%, #aaa);

  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
}

Next we position the face in the centre of the page. The mouth is a simple black line, and we'll create that using a border.

.baymax {
  border-bottom: 1.5em solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -40%);
}

The first property sets a black border of width 1.5em. It then positions the line using absolute positioning, pushing it down 50% and across from the left 50%. These 50% values relate to the size of the container (body) element.

The problem we now have is that the element now starts halfway down and halfway across the screen. It's off center.

To offset this, we use a transform to pull the element left 50% of it's width, and up 40% of it's width.

At this stage the mouth is centered like so:

Adding the eyes

We'll make use of the before and after pseudo-elements to add eyes to the face. This won't need any extra HTML and is entirely handled by the CSS.

.baymax::before {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  left: -9em;
  top: -6em;
  transform: skewX(-4deg);
}

.baymax::after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  right: -9em;
  top: -6em;
  transform: skewX(4deg);
}

Each of these pseudo-elements have a black background, and a border-radius of 50% to make them circular. Each is positioned at an end of the mouth, and lastly have a skew transform to make them look like they're tilted back a little. The result should look like this:

Low battery

There's a funny scene in the movie where Baymax's battery runs low. He staggers around and his eyelids droop. We can use a combination of background gradients and animation to create the effect.

First we want to give the background two colours. Black for the part of the eye that's open, and white for the eyelid. The white part needs to be positioned outside the eyes at first, then we will animate it in to make the eyelids droop.

.baymax::before {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

.baymax::after {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

We're adding a background linear gradient, made it twice the height of the container, and then position it so that the top half is outside the container.

With the two background gradients in place, we can add animation keyframes to control the eyelids movement.

@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}

Animation keyframes are a way of describing a series of frames, using a percentage. The percentage relates to how long the animation has gone on for. So a percentage of 50% means half-way through the animation.

In this way we can set the background to stay up till half-way through, then between 50% and 85%, it moves down, and then snaps back at the end of the animation.

The next step is to tell the pseudo-elements to use these animation keyframes. Add the animation property to the existing styles.

.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}

Here we've told the browser to use the blink animation on each element. The animation duration is set to six seconds and will loop infinitely.

One extra property is in the second example. The 0.1s after the 6s tells the browser to delay that animation by 0.1 seconds. This creates the effect of the second eye closing slightly later than the first. It adds to the tired, droopy effect and makes it look a little more human. The end result should look like this:

You can see the effect full screen.

Browsers

In the code examples, I've omitted any of the usual -webkit and -moz prefixes. The transform and animation properties should be prefixed, and I'd recommend using something like Autoprefixer for this.

Shareable gif version

Here's an animated gif version you can more easily share online.

Clocks

2015-02-25T00:00:00Z

It's about time. In this article we'll take on the challenge of creating and animating a clock, using simple CSS animations as well as JavaScript to trigger them.

This is the clock we'll create using HTML, CSS, an SVG background and a little JavaScript. We'll use CSS animations or transitions for any movement, and rely on JavaScript to set the initial time and adding basic CSS transforms.

```html

```

HTML

To get started we'll need some HTML.

<article class="clock">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</article>

My initial approach was to use three elements for each of the hands. I then went back and wrapped each in a container element. While the simpler HTML worked as far as the basic CSS animations, we'll need containing elements when we want to position the hands and animate them also.

Clock face

We'll begin with a basic clock design has a round face, with simple hours, minutes and seconds hands.

.clock {
  border-radius: 50%;
  background: #fff url(/images/posts/clocks/ios_clock.svg) no-repeat center;
  background-size: 88%;
  height: 20em;
  padding-bottom: 31%;
  position: relative;
  width: 20em;
}

.clock.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

You can get the SVG background here. I've also added a pseudo-element to add a solid black circle to the center. The hands of the clock can then be placed behind this pseudo-element as needed.

We should now have something like this.

Before adding the hands, we need to place the containers.

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

This stacks each container on top of the clock. Next we create the hands.

Hour hand

Each hand is given the position property of absolute and placed in the twelve o'clock position. We'll begin with the hour hand.

.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

I'm using percentages to make scaling the clocks easier. It's a bit more work but makes it easier to have them fit the view or shrink down for mobiles. We also set the transform-origin property to the bottom of the hand so that it can be rotated later.

```html

```

Minute hand

The minute hand is similar, but taller and thinner.

.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

```html

```

Second hand

The second hand is thinner again, but also set further down so that it extends further than the center. To allow for this the transform-origin to 80%. This leaves 20% of the hand extending past the center.

.seconds {
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index: 8;
}

```html

```

Animation

A stopped clock is only going to be right twice a day. Let's add some animations to make the clock behave more like the real thing.

Some clocks jump along with each second, usually making a ticking sound. Some clocks purr along with the hands moving smoothly. We'll try both. First, we'll make the hands move smoothly.

We can use one keyframe to tell the hands to move around 360 degrees (the 0% starting position is implied).

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

This keyframe tells the element to animate around 360 degrees, if applied to the element using the animation property. We'll use a linear timing function on the hand to make the hands move smoothly.

.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite linear;
}

The hours hand is set to rotate once every 12 hours (43,200 seconds). The minute hand rotates once per hour, and the second hand once every minute.

Put it together and we now have movement!

```html

```

If you are very sharp-eyed, you might be able to even make out the minute hand moving. It would take an hour for it to complete a rotation, and twelve hours for the hour hand to complete it's circuit.

The second hand takes 60 seconds, so it easier to notice.

Adding steps

We can make the hands behave more like a normal clock by having the second hand move around the clock in 60 separate movements. A simple way to achieve this is using the steps timing function. The animation property for each hand then becomes:

.minutes-container {
  animation: rotate 3600s infinite steps(60);
}
.seconds-container {
  animation: rotate 60s infinite steps(60);
}

Both the minute and seconds hand now move around in sixty steps. The browser automatically calculates how far each of these 60 steps move.

```html

```

The correct time

It's all very well having the time look good, but how about being accurate? With a little JavaScript we can have the time be correct for our visitors. Here's the code.

/*
  * Starts any clocks using the user's local time
  * From: cssanimation.rocks/clocks
  */
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();

  // Create an object with each hand and it's angle in degrees
  var hands = [
    {
      hand: 'hours',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to set their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'minutes') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

This function converts the time (hours, minutes and seconds) into the corresponding angle for each hand. It then loops through each hand and applies that angle using the style.transform property of rotateZ.

This will work on most browsers, except Safari or other browsers needing a prefix. To allow for this we also use the style.webkitTransform property.

This then sets the clock to the current system time.

```html

```

Aligning second and minute hands

We need to make sure that the minute hand moves when the second hand hits the twelve o'clock position.

When the clock is first drawn on screen there is less than one minute before the minute hand needs to move. To allow for this, we can calculate how long until this first minute ends and manually nudge the hand along. Since we're using JavaScript to make this first movement, we can continue rotating it by six degrees every minute using setInterval.

Before we move the minute hand we need to communicate how far into the current minute we are. You may have noticed these lines.

if (hands[j].hand === 'minutes') {
  elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
}

These extra lines check to see if the hand is the "minutes" hand, and if so, sets a data attribute with the current angle of the seconds hand.

With this data attribute set, we can then use this data to work out when to move the minute hand.

/*
 * Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
 */
function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}

/*
 * Do the first minute's rotation
 */
function moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // Then continue with a 60 second interval
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 12;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 60000);
}

Adding bounce

Since we're now using JavaScript to move the minute hand, we should remove the animation property. Rather than simply remove it, we can replace it with a transition. This is an opportunity to add a bit more character to the animation.

When the JavaScript sets a new angle for the hand, a CSS transition on the element will tell the browser to animate this new position. This means that the JavaScript only deals with the simple angle changes and the browser can take care of animating it.

Before we do that, we should update the code to use JavaScript to move the seconds hand also. Let's use this code to animate the seconds hands containers sixty times per minute.

/*
 * Move the second containers
 */
function moveSecondHands() {
  var containers = document.querySelectorAll('.seconds-container');
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 6;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 1000);
}

With both the seconds and minute hands handled by JavaScript, update the CSS to replace the animation properties with transitions.

.minutes-container {
  transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

These transitions apply to the transform property and use the cubic-bezier timing function. This timing function gives the hands some bounce.

```html

```

iOS 7 Style

I'm a big fan of the simplicity of the clock used in Apple's iOS 7. They've since elongated the hands, but I prefer the shorter version.

By styling the hands and adding a background image with the numbers, we can easily create this look.

```html

```

This design is itself an evolution of the Swiss Railway Clock by Hans Hilfiker. By changing a few styles and adding a new background image we can adapt our clock to this style.

```html

```

If you come up with other designs, do let me know.

Using Moment.js

One of my first ideas when planning this post was to recreate the hotel clocks scene, with three clocks showing different time zones.

The easiest way to adjust for different time zones is by using the amazing Moment.js Timezone library.

```js

New York

```

```js

London

```

```js

Tokyo

```

You can see the code in action on this Codepen.

Browser compatibility

Modern browsers can handle the CSS transitions and animations involved. IE10+, recent Chrome and Firefox support them without prefixes, and Safari requires the -webkit prefix.

Don't forget to use the prefixed properties within JavaScript too.

Transitions vs Animations

2015-03-04T00:00:00Z

When animating on the web, do you use a transition or an animation? There are times when you would want to choose one over the other. Let's discuss the differences.

What are Transitions?

A transition occurs when an element changes from one state to another, and the browser fills in that state change with a sequence of in-between frames. It has a beginning and an end state.

We most often see transitions used on hover states, or when information on a page is added or removed. The hover states might be a subtle change in font color, and information on the page might fade from invisible to visible.

Since transitions are limited to these two stages, they can lack the nuance of animations but at the same time be easier to use.

When to use them

If you want to change an element from one state to another smoothly, a transition is a good choice. Simple changes can usually be handled with transitions and timing functions can be used to customize the way the transition occurs.

A transition would work well when someone hovers or taps a button:

Or when an item is added to a page:

A list item
A list item

What are Animations?

CSS Animations are a more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state, animations can be made up of as many in-between states as you like, and offer more control over how the states are animated.

Where a transition only goes from A to B, an animation can go from A, B, C to D. Or any number of stages as needed.

Animations achieve this by using sets of keyframes. Where a transition can be specified with one line in the class, an animation works by referencing a set of keyframes that are described separately in the CSS.

When to use them

If an animation needs to run when the page loads, or is more complex than a simple A to B state change, a CSS animation might be more appropriate.

Examples of this might be if you want to have an animation on the page that plays after a certain amount of time, like this blink effect on this Baymax character:

An animation might also be a good choice if an item has to move across multiple places on the page, such as an instruction overlay with a mouse cursor point out various areas of interest on a screen.

Sometimes it's not obvious

A recent post began as an animation, but then became a case for transitions.

```html

```

When I began designing this clock, I had the hands move continuously on load. This was a good case for using the animation property. It was to animate on load and continue forever. When I started adding more complexity, I found it made more sense to have the hands' angles set using JavaScript.

As the hands were being moved by JavaScript, transitions became a better choice. When the JavaScript changes the angle of a hand, the CSS transition handles the change (from state A to state B) more elegantly than an animation would.

Check out this CSS clock tutorial for more detail.

In summary

Transitions for creating a smooth transition from one state to another, and animations for more complex series of movements.

Transitions are generally easier to create and manage, and apply to the majority of situations. If you need more control over animating an element through a series of steps, or if the animation needs to begin on load, then an animation with keyframes might be the better choice.

Apple Watch Dials

2015-03-09T00:00:00Z

With the announcement of Apple's new watch this week, I thought I'd take a look at creating the activity dials using CSS.

In this post we'll make use of CSS keyframe animations and a bit of overflow trickery to create the radial progress bars shown in the activities section of Apple's new watch.

Demo

Here's an example of the final effect.

```html

Activity 10:09

```

Radial progress bars

The watch's activity display is made up of 3 dials. Each is a kind of progress bar, shaped to curve around a circle. It's a little tricky to create this shape, but it can be done using two wedges and some carefully timed animation.

We'll begin with a simple half-circle wedge shape.

```html

```

Here's the HTML for this wedge:

<div class="dial-container">
  <div class="wedge"></div>
</div>

We set up the wedge to be a half-moon shape using the border-radius property and rotate it using a keyframe.

.wedge {
  animation: rotate 4s infinite linear;
  border-radius: 0 4em 4em 0;
  background: red;
  width: 2em;
  height: 4em;
  transform-origin: 0% 50%;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

Masking

In earlier experiments, I'd tried creating this effect using the CSS clip property. This did work in some browsers, but it's a deprecated property and tricky to use. Instead, we can create a similar effect by using overflow: hidden on the container.

There are two elements in play here. The dial-container is half as wide as the wedge, and has it's overflow property set to hidden. By placing it outside the container, we can rotate it into view.

```html

```

.dial-container {
  position: absolute;
  top: 0;
  left: 2em;
  width: 2em;
  height: 4em;
  overflow: hidden;
}

The container is positioned to the right of where the wedge is positioned, and the wedge is then rotated into view.

To create the full circle we need to create a second wedge. We can create this by creating a second container, placed on the left and rotating a wedge into it from the right.

```html

```

We can then put these together and create a circular dial. We'll also add some animation to have the second half of the dial start moving after the first dial.

Full circle

Here's the HTML for these two parts. I've added a wrapper so that I can position both the containers on top of each other.

<div class="wrapper">
  <div class="dial-container container1">
    <div class="wedge"></div>
  </div>
  <div class="dial-container container2">
    <div class="wedge"></div>
  </div>
</div>

And the CSS to handle the wrapper, containers and the two wedges.

.wrapper {
  position: absolute;
  width: 4em;
  height: 4em;
  left: calc(50% - 2em);
}
.dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width: 2em;
}
.wedge {
  background: red;
  height: 4em;
  width: 2em;
}
.container1 {
  left: 2em;
}
.container1 .wedge {
  animation: rotate-bg-1 4s infinite linear;
  border-radius: 0 4em 4em 0;
  left: 0;
  transform-origin: 0 50%;
}
.container2 {
  left: 0;
}
.container2 .wedge {
  animation: rotate-bg-2 4s infinite linear;
  border-radius: 4em 0 0 4em;
  transform-origin: 2em 2em;
}
/* First animation moves 180 degrees in the first 2 seconds */
@keyframes rotate-bg-1 {
  50%, 100% {
    transform: rotateZ(180deg);
  }
}
/* Second animation moves 180 degrees in the last 2 seconds */
@keyframes rotate-bg-2 {
  0%, 50% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}

The result should look like this:

```html

```

Progress

The next step is to make the wedge into a bar. We can do this by masking the middle. Adding a circular pseudo-element to a container, set to the background colour, has the desired effect.

<div class="wrapper">
  <div class="dial-container container1">
    <div class="wedge"></div>
  </div>
  <div class="dial-container container2">
    <div class="wedge"></div>
  </div>
</div>

.wrapper::after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

We now have something that looks more like Apple's activity radial progress bars.

```html

```

Rounding the edges

The Apple Watch demo features nicely rounded ends on its progress bars. To recreate this we'll add and animate some elements on each end of the bar. To begin we add the extra elements.

<div class="wrapper">
  <div class="dial-container container1">
    <div class="wedge"></div>
  </div>
  <div class="dial-container container2">
    <div class="wedge"></div>
  </div>
  <div class="marker start"></div>
  <div class="marker end"></div>
</div>

The start marker will remain at the beginning, and the end marker needs to be animated to keep pace with the front of the progress bar. We can handle that with some CSS.

.marker {
  background: green;
  border-radius: 50%;
  height: 0.5em;
  width: 0.5em;
  position: absolute;
  top: 0;
  left: calc(50% - 0.25em);
}
.end {
  animation: rotate-marker 4s infinite linear;
  transform-origin: 50% 2em;
}
@keyframes rotate-marker {
  100% {
    transform: rotateZ(360deg);
  }
}

This CSS sets up the two markers to be green circles, and positions them at the top middle of the screen. The end marker then gets the rotate-marker animation and has its transform-origin set to the centre of the container. This means than when it rotates, it will spin around an arc.

```html

```

Changing the colour of the markers to red lets them blend in with the bar and give it a rounded effect. Adding a little cubic-bezier tweaking to the animation can give it a bit more character also.

```html

```

Putting it all together

Three of these radial progress bars together creates the Apple Watch activity dials. If you want to see more of this code, a full demo is available on Codepen.

```html

Activity 10:09

```

Animation Principles for the Web

2015-03-21T00:00:00Z

As front-end designers and developers, we use CSS to style, position and create great looking sites. We often use CSS to add movement to pages in the form of transitions or even animations, but we don't usually go much beyond that.

Animation can be a powerful tool to help our visitors and customers understand and benefit from our designs. There are principles we can apply to our work to make the most of this power.

Long established as fundamental working practices at Disney, the 12 Principles of Animation were published as "The Illusion of Life: Disney Animation" in 1981. These principles describe how animation can be used to immerse viewers in a believable world.

In this article I'll go through each of the 12 principles, and discuss how they might apply when making web pages. You can find the source HTML and CSS on Codepen for them all here.

Squash and stretch

This is the notion that an object has a physical mass, and when it moves this mass stays the same. A ball will widen as it hits the ground when bouncing, but also get shorter as its mass is redistributed.

This is most useful when creating objects that we want to be considered physical, such as people, clocks or bouncing balls.

It's possible to ignore this rule when working with elements of a web page. DOM elements aren't necessarily associated with physical objects, and can grow or shrink on screen as needed. For example, a button could grow and morph into an information box, or error messages can appear and disappear.

Still, the squash and stretch techniques can be used to give an object the feeling of physical mass. Even small changes in shape can create subtle but eye-catching effects.

Anticipation

Movements don't tend to happen suddenly. In real life, motion is usually preceded by some kind of build-up, whether it's a ball beginning to roll before it falls off a table, or a person bending their knees in preparation to jump.

We can use this to make our transitions and animations feel more life-like. Anticipation could be in the form of a subtle bounciness that helps people understand what is changing and keep track of the objects on-screen.

For example, an element could shrink slightly before growing larger on hover; adding extra items to a list could be introduced by having other items move out of the way first.

Staging

Staging is making sure an object is the focus of a scene, when other objects or aspects of the scene make way for where the main action is taking place. This means either placing the main action in a prominent position, or masking other elements to focus on what the user needs to see.

In web terms, one approach is to use a modal overlay for certain content. Adding a dark layer over the existing page and then placing the content in front stages it and shows it as the main point of focus.

Another approach is to use movement. When many objects are moving, it's hard to know which is worthy of attention. If all other movement is stopped and one object moves, even slightly, it will be much easier to spot.

One technique is to make a "Save" button wobble or flash briefly to suggest to the user that they might want to save a document. With the rest of the screen held static and motionless, even subtle movement will stand out.

Straight-Ahead Action and Pose-to-Pose

Straight-ahead action is when every frame of an animation is drawn. Pose-to-pose is when a series of keyframes are defined and the intervals filled in later, usually by an assistant.

Most web animation uses pose-to-pose animation: the transition between keyframes can be handled by the browser, which interpolates the difference between each and draws in as many frames as it can to make the animation smooth.

One exception to this is the steps timing function. With this function, the browser "steps" through as many discrete frames as defined. This way you could draw out a series of images and have the browser display each in sequence, creating a "Straight Ahead Action" style.

Follow Through and Overlapping Action

```html

```

Things don't always happen at the same time. When a car stops suddenly it tilts forward, with smoke from the tires and the driver inside continuing the forward motion until they are stopped or dissapate.

These details are examples of follow through and overlapping action. They can be used on the web to help emphasise that something is stopping, and hasn't merely forgotten to animate. For example, an item added to a list might be slide in, proceed slightly too far, and then correct itself to the right position.

To create a feeling of overlapping action, we can make elements move at a slightly different pace to each other. It's a technique used well in the iOS operating system when transitioning between views. Some buttons and elements move at different rates, and the combined effect is much more lifelike and less flat than if everything moved at the same rate. The combined movements give the viewer time to properly understand the change.

In web terms this might mean stacking transitions or animations, creating effects that work at different speeds.

Slow In and Slow Out

Objects rarely go from a standstill to maximum speed immediately. They tend to speed up gradually and slow before stopping. Without acceleration and deceleration, movements feel robotic.

In CSS terms, slow in and slow out are known as easing. Easing is what is known as a timing function, a way of describing the rate of change through the course of an animation.

Using timing functions, animations can start slow and speed up (ease-in), start fast and slow down (ease-out) or more complex effects using the cubic-bezier timing function.

Arc

```html

```

While objects are more lifelike when they follow the "Slow In and Slow Out", objects rarely move in straight lines: they tend to follow curved arcs.

We can achieve arcing movements with CSS in a couple of ways. One is to combine multiple animations. A bouncing ball animation, for example could be made up a ball moving up and down, while a second moves it to the right at the same time. The ball would then arc across the screen.

Another option is to rotate an element. We can adjust an object's center of rotation by setting its transform origin outside the element. When we rotate the object, it will rotate in an arc.

Secondary Action

While a primary action is taking place, a secondary animation can help emphasise or augment it. This could be the swinging arms of someone walking or the tilt of their head. Or a bouncing ball kicking up a little dust.

On web sites, secondary actions could see elements moving out of the way when the main focus of attention is introduced, such as dragging an item and placing it in the middle of a list.

Timing

An animation's timing is how long it takes to complete. Timing can be used to make weighty objects look heavy in their motion, or to add character to movement.

On the web this might be as simple as adjusting the animation-duration or transition-duration values.

It's easy to let animations take longer than they need to. Adjusting timing can help get the animation out of the way of the content or interaction.

Exaggeration

Most commonly used in cartoons, exaggeration can draw attention to certain actions and make them more dramatic. A wolf making an attempt to bite might have its jaws open wider than is normal to make the effect more scary or humorous.

In a web page, objects can be scaled up and down to emphasise them and draw attention. For example when filling a form, the active section could grow while the others shrink or fade.

Solid drawing

```html

```

When animating objects in three dimensions, care should be taken to ensure they follow the rules of perspective. People are used to living in a three dimensional world, so when objects don't behave as expected they look wrong.

Modern browsers have decent support for three dimensional transforms. This means that we can rotate and place objects in a scene and the browser can handle the transitions automatically.

Appeal

```html

```

Appeal is the character of the artwork and how it can make us connect with the intention of the artist. Like charisma in an actor, it's the attention to detail and movement combined that creates an appealing result.

Carefully crafted animations on the web can create appeal. Companies such as Stripe have made great use of animation to add credibility to their checkout process.

Try it yourself!

Making use of the other principles is a good way to improve animations. Animations that maintain the physical weight of objects, anticipate changes, make use of secondary actions and good timing will be valuable and helpful additions to your content.

When you have the chance to add some animation to your pages, making use of one or more of these principles will make them more effective and appealing.

Mac Plus CSS

2015-03-31T00:00:00Z

I will always remember the moment I got to use the Apple Mac Plus. In this post I will try to pay tribute to this lovely computer by creating it in CSS.

Retro style

Let's build (virtually) a computer. Not just any old computer, but a computer that was, for many of us, an introduction into the world of Apple. The Macintosh Plus, codename Mr. T, was first introduced in 1986 and packed a whopping 1MB of RAM and an 8 MHz processor. Aside from all that raw power, it was a seriously cute design, which made the computer more fun to use.

In this project I will build a 3D model of the Macintosh Plus and display it in a three dimensional setting. Using CSS Keyframe animation we'll make it move on screen to show off the 3D effect better.

Why use CSS?

With Cascading Style Sheets are the standard way to style web page content. Everything from fonts, colors, positioning and background images is handled by CSS, and it is an essential tool for making modern web pages. It's not just for two-dimensional content. With the use of 3D transforms and positioning, you can use CSS to add depth too.

Creating scenes in CSS results in smaller file sizes than images. In this example, the CSS compresses to just 4KB and the HTML less than 1KB. An equivalent image would be 100KB or more.

Live demo and source code

See the CSS Mac Plus online.

Full source code can be downloaded here, and you can view the full CSS file on Github.

You can also follow along the various stages by looking up the examples folder in the project files.

On Prefixes

I have omitted any CSS prefixes from the code examples to make the code easier to read. When working on this yourself make sure to include prefixes for the other browsers, such as the webkit, moz, ms, and o.

Setting the stage

When creating 3D using HTML we need a scene within which to build it. Start with a container HTML element:

<div class="stage"></div>

This is a simple div with the class stage, and it acts as a container for our 3D object.

To establish it as a 3D container, we set some CSS properties, perspective and perspective-origin. The perspective property is similar to a scene's vanishing point. The smaller the value, the shorter the vanishing point and more extreme the effect. This image shows how changing the value changes the shape on a scene:

Try it yourself

If you'd like to have a go, look for the screen.css file in the examples/01-Perspective folder in the project files. You'll be able to update the perspective value and see the effect by opening the index.html file from the same folder in your browser.

The perspective-origin property sets the viewing position. Changing it allows you to look down onto the scene from above, up from below or in from the side.

In this example I've gone for a perspective value of 1,600 pixels. The CSS looks like this:

.stage {
  perspective: 1600px;
  perspective-origin: 50% 100px;
}

The stylesheets folder within the project ZIP file contains the full CSS rules for setting the various other properties on the stage, including a background, width and height.

Planning the structure

With a stage in place we'll use some HTML elements to create the computer. Rather than try to include every last detail, we'll focus on the front detailing for the most part.

The main body of the Mac is a box, tilted slightly back at an angle and sitting on a flat base.

This will mean making two boxes, one tilted back a little and sitting on a flatter box. To create this effect, we'll make use of the CSS transform property.

If you'd like to see the full HTML, it can be found in the project files within the index.html file.

Transforms

The CSS transform property allows us to rotate, skew, position and even scale elements on the page. We can make use of the positioning and rotation to create our scene.

A transform property might look like this:

.example {
  transform: rotateY(45deg) translateZ(-100px);
}

You build a transform by chaining a series of statements. In this example, the example element is rotated 45 degrees around the Y-axis, and then pushed back 100px along the Z-axis.

It should look something like this:

An example of CSS transforms can be found in the examples/02-Transforms folder within the project files. Two elements are positioned in the example, and their position can be changed by editing the includes 02-Transforms/css/screen.css file.

Transform-origin

When rotating elements around the place, it’s worth keeping in mind that the transforms have an origin that can be set. The transform origin is a point referred to by specifying the X, Y and Z values. This is the default:

.default-origin {
  transform-origin: 50% 50% 0;
}

When building this example I kept the default but it’s worth knowing that it’s there.

Making the boxes

We can use some transforms to set up the main body of the computer. The HTML looks like this:

<div class="stage">
  <div class="positioning animated">
    <div class="mac">
      <figure class="back"></figure>
      <figure class="left"></figure>
      <figure class="right"></figure>
      <figure class="top"></figure>
      <figure class="base-front"></figure>
      <figure class="base-left"></figure>
      <figure class="base-right"></figure>
      <figure class="base-back"></figure>
      <figure class="front"></figure>
      <figure class="shadow"></figure>
    </div>
  </div>
</div>

Within the stage, there's a div I'll use to position the computer on the page. Within that is the Mac itself. The two boxes are themselves made up of figure elements. These elements represent the sides, top, front and back of the two boxes.

There is also a figure to represent the shadow.

This example can be found in the examples/03-Boxes folder.

The result we'll be going for looks like this:

Each of the boxes are transformed into place using the CSS transform property, and CSS gradients are used to add depth to the scene.

The CSS looks like this:

.front {
  height: 11.5em;
  width: 9.6em;
  background: #e0e0e0;
  transform: rotateX(5deg) translateZ(5.43em);
}
.back {
  height: 11.5em;
  width: 9.6em;
  background: linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
  transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
}
.top {
  height: 10.95em;
  width: 9.6em;
  background-color: #ebf0dc;
  background: linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
  transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
}
.left {
  height: 11.5em;
  width: 10.9em;
  background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
  transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
}
.right {
  height: 11.5em;
  width: 10.9em;
  background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
  transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
}
.base-front {
  height: 2.1em;
  width: 9.6em;
  background: #c2c2c2;
  transform: translateY(10.7em) translateZ(5em);
}
.base-back {
  height: 2.1em;
  width: 9.6em;
  background: #b3b3b3;
  transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
}
.base-left {
  height: 2.1em;
  width: 10em;
  background: #b3b3b3;
  transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
}
.base-right {
  height: 2.1em;
  width: 10em;
  background: #b3b3b3;
  transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
}
.shadow {
  width: 10em;
  height: 11em;
  background: transparent;
  transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
  box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4);
}

Each of the figures has been given a width and height, and a CSS background gradient or color. The figures are then each positioned using the transform property. For example, the left side is rotated 90 degrees before being translated (moved) back half the width of the computer.

The front figure is translated forwards, along the Z-axis, half the length of the computer and the back is rotated 180 degrees before being translated back.

For the pieces of the top box, each of the figures is rotated 5 degrees back around the X-axis. This means that the main body of the Macintosh Plus is tilted back.

Finally the shadow figure makes use of the CSS box-shadow property to create a shadow that makes it look like the box is sitting on a flat surface.

Bezels

A feature of this computer is the sloped edges around the front. These edges, which I'll refer to as bezels, help soften the hard corners of the box and make it look less boxy.

To achieve this I added some extra elements to the front figure, like so:

<figure class="front">
  <span class="bezel-top"></span>
  <span class="bezel-left"></span>
  <span class="bezel-right"></span>
  <span class="bezel-bottom"></span>
</figure>

The span elements within the front figure each represent one of these bezels. With some styles added, they will look like this:

This example can be found in the examples/04-Bezels folder.

The following CSS positions each, and makes use of a border-width trick to create sloped edges.

.front .bezel-top {
  border-top: 0.75em solid #f2f2f2;
  border-right: 0.5em solid transparent;
  border-left: 0.5em solid transparent;
  width: 8.6em;
}
.front .bezel-left {
  border-top: 0.5em solid #d9d9d9;
  border-right: 0.75em solid transparent;
  border-left: 0.75em solid transparent;
  width: 10em;
  transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
}
.front .bezel-right {
  border-top: 0.5em solid #d4d4d4;
  border-right: 0.75em solid transparent;
  border-left: 0.75em solid transparent;
  width: 10em;
  transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
}
.front .bezel-bottom {
  border-top: 0.75em solid #cccccc;
  border-right: 0.5em solid transparent;
  border-left: 0.5em solid transparent;
  width: 8.65em;
  transform: rotateZ(180deg) translateY(-10.76em);
}

Each bezel has 3 borders. For the top bezel, we set a colored border on the top. We then set two transparent borders on the left and right sides. In CSS, when a border meets a border of another color, the line where they meet is diagonal. This means that the transparent borders result in diagonal edges to the colored border.

This technique is applied to each of the bezels, creating the appearance of sloped edges on each.

The bezels also have a transform applied to rotate and position them at the side of the front figure.

More Details

With the main boxes of the computer in place we can add the various details that make it look like a Macintosh Plus, such as the screen, icon and disk drive.

The front figure contains the following HTML:

<figure class="front">
  <span class="bezel-top"></span>
  <span class="bezel-left"></span>
  <span class="bezel-right"></span>
  <span class="bezel-bottom"></span>
  <figure class="screen-container">
    <span class="screen">
      <p>hello, Dave</p>
      <span class="sheen"></span>
    </span>
  </figure>
  <figure class="logo">
    <span class="image"></span>
    <span class="text">Macintosh Plus</span>
  </figure>
  <figure class="floppy"></figure>
</figure>

A working example can be found in the examples/05-Completed folder.

Screen

The screen is made up of several elements, including a container, the screen itself and a "sheen" layer on top.

The CSS for this makes use of CSS gradients to make it look inset into the front of the computer and the sheen span uses an almost-transparent gradient to give the screen some shininess.

Logo

The logo is made up of two parts, an image and some text. The image span contains a background image of the old colorful Apple logo, and the text is positioned next to it. The CSS for these can be found in the source files.

To create the right look, an embedded font is added. This uses the CSS font-face property. There are many ways to do this, but perhaps the easiest is to use a service such as Font Squirrel's @font-face generator to create the following CSS:

@font-face {
  font-family: "apple_garamondregular";
  src: url("../fonts/apple_garamond-webfont.eot");
  src: url("../fonts/apple_garamond-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apple_garamond-webfont.woff") format("woff"), url("../fonts/apple_garamond-webfont.ttf") format("truetype"), url("../fonts/apple_garamond-webfont.svg#apple_garamondregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Font Squirrel helps by generating the various files (eot, woff, etc) that can then be placed in the project and called in within the CSS as shown.

The result is a font that closely matches the original.

Floppy drive

The floppy drive is a single element, and uses CSS borders to make it look like it's set into the front. The CSS that creates the effect looks like this:

.floppy {
  height: 0.2em;
  width: 2.8em;
  transform: translate3d(4.8em, 8.9em, 0);
  background: #555555;
  border-top: 0.1em solid #cccccc;
  border-right: 0.3em solid #e6e6e6;
  border-bottom: 0.1em solid #f2f2f2;
  border-left: 0.3em solid #e6e6e6;
  border-radius: 0.25em;
}

The floppy drive has a solid grey background color, and four borders. The top border is the darkest, with the bottom border being brighter to make it seem lit from above. Finally, a border-radius rounds the corners.

Putting the pieces together

Each of the pieces, when put together, look like this:

Adding animation

While what we have looks pretty good, we can properly show off the fact that it's a 3D object by making it move. To do this we'll make use of CSS keyframe animation.

In CSS, there are two types of animation. Transitions, in which elements on the page animate from one style or position to another, and keyframes, which represent a more complex series of animated steps.

A series of keyframes can be described as a series of percentages, with CSS describing each step. It could look something like this:

@keyframes back-and-forth {
  0% {
    transform: rotateY(40deg);
  }
  40%, 50% {
    transform: rotateY(-40deg);
  }
  90%, 100% {
    transform: rotateY(40deg);
  }
}

In this example the animation is called back-and-forth, and is made up of 3 steps. It begins rotated to an angle of 40 degrees. Then by the 40% mark, is rotated to minus 40 degrees. It stays at this rotation until 50%, then at 90% has returned to the original position.

The browser automatically fills in the gaps by animating the properties. In this case it will animate the angle of rotation.

Applying animation

To apply this animation we can use the CSS animation tag.

The animation tag looks like this:

animation: back-and-forth 14s ease-in-out infinite;

A few things are combined into one line here. It references the animation by name ("back-and-forth"), sets a duration of 14 seconds, and tells the animation to repeat indefinitely. The ease-in-out value refers to easing, which tells the browser to have the animation start and end gradually.

Applying this animation to the "positioning" div results in something like this:

What we learned

In creating and animating a 3D object in CSS, we covered quite a few techniques. We set the perspective and perspective-origin. We then made use of transforms to rotate, move and position elements, added gradients to give a more realistic 3D effect, and used some CSS border tricks to create bevels and depth. Finally we made use of keyframes and CSS animation to give the scene life.

Browser compatibility

Not all browsers can yet handle CSS transforms. Internet Explorer will struggle, but there is hope that support will be arriving in IE 11. All recent versions of Chrome, Safari and Firefox will do ok.

Modernizr provides a set of JavaScript tools to detect browser capabilities and can be used to show alternate content in cases where the browser cannot support a certain CSS property. In the example code, you'll find I've made use of Modernizr to detect the presence of 3D transforms. In cases where they don't exist, an image is shown instead.

Going forward

While the example might not seem like something you'd use in the average web site, the techniques can be applies to all sorts of scenarios.

For example, CSS transforms can be used to add depth to page transitions, image carousels, logos and buttons, to name a few. CSS animations can be used to add more interesting movement and finesse to your transitions, and CSS gradients can add depth to pages without a need to use images.

WWDC 2015

2015-04-30T00:00:00Z

Every year Apple runs a special event for their developers called WWDC. WWDC (Apple's Worldwide Developer Conference) is a chance for iOS and OSX designers and developers to learn all about what cool stuff Apple's up to and what to expect in the new versions of the mobile and desktop software.

With each year's event, they create a beautiful invitation. This year I was quite taken with the overlapping circles and shapes, and decided to have a go making it in HTML and CSS.

WWDC 15 invitation

Apple's icons often use overlapping colours and shapes, like a iOS 7 Photos icon. This year the invitation to WWDC included this image:

It's made up of a set of overlapping, semi-transparent shapes. Perfect to recreate with some HTML and CSS.

Planning: HTML

Taking on a complex piece like this involves a bit of planning. For this example, I broke the layout down into it's parts.

The logo is made up of 3 sets of shapes. The basis is made up of 8 large circles, so I began by listing them out:

<div class="large circle one"></div>
<div class="large circle two"></div>
<div class="large circle three"></div>
<div class="large circle four"></div>
<div class="large circle five"></div>
<div class="large circle six"></div>
<div class="large circle seven"></div>
<div class="large circle eight"></div>

I'm using multiple classes here so that I can write CSS that applies to all large elements, and CSS that applies for all circle elements, etc. The more we can reuse the CSS, the simpler it should be.

We now have eight smaller shapes that sit in front and sit out at the edge of the large circles. These shapes are made up of four circles and four "squircles", squares with a rounded edge. I'll add some HTML for them:

<div class="small circle one"></div>
<div class="small squircle two"></div>
<div class="small circle three"></div>
<div class="small squircle four"></div>
<div class="small circle five"></div>
<div class="small squircle six"></div>
<div class="small circle seven"></div>
<div class="small squircle eight"></div>

We have the eight smaller shapes listed here, with alternating circle and squircle classes. I've labelled each set with numbers one through eight. This will be useful when we position the shapes and give them colours.

Lastly we have two large squircles in the middle of the logo.

<div class="large squircle one"></div>
<div class="large squircle two"></div>

Again these are of the large size and the squircle shape.

Logo and content

Before moving on to style this HTML we'll add some content for the central squircle.

<div class="large squircle two">
  <div class="content">
    <svg viewBox="0 0 160 164" xmlns="http://www.w3.org/2000/svg">
   <g>
    <g id="svg_1">
     <path d="m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/>
    </g>
   </g>
  </svg>
  <h1>The epicenter of change.</h1>
  <p><strong>WWDC</strong>15</p>
</div>

Here we have an inline SVG image and the text from the invitation. The font used on the original image is "San Francisco". This font isn't standard yet on OSX so for now I'll replace it with Helvetica Neue Light.

Styling the circles and squircles

The first thing we want to set up is the circle and squircle elements.

.circle, .squircle {
  border-top: 0.1em solid rgba(255,255,255,0.4);
  height: 12.5em;
  position: absolute;
  width: 12.5em;
}

Most of the shapes are of the larger variety so I'll style them at the larger size by default. Each of the elements uses position absolute and has a light white border on top. This border might not match exactly with the invitation image but helps give the shapes a little sheen.

Next we'll set styles for the large circles. Using a border-radius of 50%, we can create the circle shape. We then position them using left and top values.

.circle {
  border-radius: 50%;
  box-shadow: 0 1em 2em rgba(0,0,0,0.5);
  left: calc(50% - 6.25em);
  top: calc(50% - 12.5em);
  transform-origin: 50% 12.5em;
}

At this point, all the circles are in the same place! But the trick here is in the transform-origin value. When you rotate an object in HTML using a transform, it rotates around a point called the transform-origin. This point is usually in the middle (50%, 50%) of the element.

In this case we've moved this point down to the bottom of the circles. When we rotate the circles, they'll fan out into the circular shape in the logo.

Let's add the CSS to position each of these circles. Looking carefully at the invitation image, we can see that the circle sitting behind all the rest is on the bottom-left. With this in mind we'll make sure the first circle in the HTML is rotated around to that position.

.one {
  background: rgba(16, 63, 236, 0.75);
  transform: rotateZ(225deg);
}
.two {
  background: rgba(37, 172, 162, 0.75);
  transform: rotateZ(180deg);
}
.three {
  background: rgba(233, 124, 32, 0.75);
  transform: rotateZ(135deg);
}
.four {
  background: rgba(235, 67, 35, 0.75);
  transform: rotateZ(90deg);
}
.five {
  background: rgba(190, 28, 65, 0.75);
  transform: rotateZ(45deg);
}
.six {
  background: rgba(208, 57, 159, 0.75);
  transform: rotateZ(0);
}
.seven {
  background: rgba(150, 32, 198, 0.75);
  transform: rotateZ(-45deg);
}
.eight {
  background: rgba(95, 33, 203, 0.75);
  transform: rotateZ(-90deg);
}

Each of these styles has a colour and a transform to rotate it into position. This animation shows how all the circles are placed at the top-middle of the screen, then rotated into place.

With the circles in place, we can style the other shapes. Firstly, a squircle is a circle but with a different border radius.

.squircle {
  border-radius: 25%;
}

When we positioned the circles, we specified a rotation and a colour. Happily enough, the smaller shapes can use this same CSS too. We'll first need to give these small shapes some styles of their own.

.small {
  width: 4em;
  height: 4em;
  left: calc(50% - 2em);
  top: calc(50% - 15em);
  transform-origin: 50% 15em;
  box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}

We set up these shapes to be smaller and position them a greater distance up from the middle. By using the same transform-origin trick, the rotate transforms from earlier will put them into the correct position without need for any more CSS.

Small squircles

The small squircle shapes are the wrong angle. They need to be rotated a further 45 degrees.

There are a couple of ways we could do this. We could add an extra element to each squircle and add a transform, or we could use a pseudo-element in the CSS. Either way is good but I thought it would be interesting to handle it in the CSS.

First we remove the background, border and box shadow from the small squircles.

.small.squircle {
  background: none;
  border: none;
  box-shadow: none;
}

We can now use the ::after pseudo-element to create a new squircle within each, and rotate them 45 degrees.

.small.squircle::after {
  background: red;
  border-radius: 25%;
  box-shadow: -0.25em 0.25em 0.5em rgba(0,0,0,0.2);
  content: "";
  height: 100%;
  position: absolute;
  transform: rotateZ(-45deg);
  width: 100%;
}

.small.squircle.two::after {
  background: rgba(37, 172, 162, 0.75);
}
.small.squircle.four::after {
  background: rgba(235, 67, 35, 0.75);
}
.small.squircle.six::after {
  background: rgba(208, 57, 159, 0.75);
}
.small.squircle.eight::after {
  background: rgba(95, 33, 203, 0.75);
}

We should now have both the large circles and the smaller shapes in place.

Content squircles

The last piece of the image is the two squircles that contain the content. Let's position them in the middle and give them a slightly transparent dark colour.

.large.squircle {
  background: rgba(30, 7, 66, 0.65);
  border: none;
  height: 15em;
  left: calc(50% - 7.5em);
  position: absolute;
  top: calc(50% - 7.5em);
  transform: none;
  width: 15em;
}

We can then rotate the first of these squircles (the one that sits behind the squircle containing the content).

.large.squircle.one {
  transform: rotateZ(45deg);
}

Adding animation

The original invitation image is not animated, but this site is called CSS Animation Rocks after all, so let's try some animation.

I'd like to make each of the sets of circles and squircles spin. To do this we can wrap each in a span and apply an animation to the span wrapper.

<span class="large-circles">
  <!-- Large Circles here ... -->
</span>
<span class="small-shapes">
  <!-- Small Shapes here... -->
</span>
  <!-- Squircles -->
<span class="content-squircle">
  <div class="large squircle one"></div>
</span>

First we position these span elements so that they don't break the layout.

span {
  display: block;
  height: 20em;
  left: calc(50% - 10em);
  position: absolute;
  top: calc(50% - 10em);
  width: 20em;
}

This places the span wrappers in the middle of the page.

Next we will apply animations to each of these three span elements.

.large-circles {
  animation: spin 10s linear infinite;
}

.small-shapes {
  animation: spin 30s linear infinite;
}

.content-squircle {
  animation: spin 20s linear infinite;
}

We're using the same set of keyframes each time, but changing the animation-duration of each. I've chosen 10 seconds, 20 seconds and 30 seconds so that they'll line up every minute.

With the animation property in place, let's put together the keyframes.

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

This starts with zero rotation and finishes the animation having rotated around 360 degrees. See it in action in this demo.

Reusing CSS

This is a fun experiment in creating overlapping shapes using CSS but one thing that I found most helpful was the way the CSS was reused in some places. Rotating both the circles and the smaller shapes was handled by the same CSS, and the animations all used one set of keyframes. This can be a good way to keep your CSS files small and make sure they load quickly.

Prefixes

When creating this example, I used autoprefixer to avoid having to think about adding browser prefixes. Do keep this in mind if you're using transitions, animations or transforms in production.

Buffer's loading animation

2015-05-22T00:00:00Z

I love finding examples of subtle animation in websites. Recently, when I was logging into Buffer, I noticed a nice loading effect in their logo. Here's how to recreate it using SVG and CSS.

Indicating activity

When something takes longer than expected, it's a nice idea to include some visual feedback to tell your visitor that something is happening. One way is to have a subtle animation, or loading animation, on the page. Buffer's approach is to animate their logo:

The animation is achieved using an animated GIF file.

When the loading is complete, the animated GIF is swapped out for a static PNG version of the logo.

It can be tricky to cleanly swap an animated GIF with a static image, and in this case we see a slight "jump" as the two are switched.

Let's see if we can get around this by creating the animation and finished state using CSS.

Why use CSS?

There are some significant advantages of using CSS instead of animated GIF files. The main advantage is size. While the animated GIF in use here is pretty small, at a mere 6Kb, the CSS needed to create a similar effect is a fraction of that. (The entire HTML and CSS on the demo page is 2.8Kb, including the heading and button styles).

CSS gives us the option to do more, while an animated GIF cannot be edited once created. Having said that, animated GIFs can be any animation at all, so may be suitable for more complex animation that couldn't be handled in CSS. For an example, see how the Twitter fav animation uses an image sprite to get around this.

Another advantage to using CSS is that it's resolution independent. We can scale it up to any size and it'll still look clear. To make the most of this, we can use an SVG image.

Creating an SVG logo

Before creating an SVG I spent a while trying to create the Buffer logo using CSS. A similar effect can be seen on the Fabric landing page, with 3 squares animating into place using CSS. Unfortunately the more subtle details in the Buffer layers meant it was too tricky, so I turned to SVG instead.

SVG (Scaleable Vector Graphics) is a type of vector image file. The files are made up of a series of paths, are infinitely scaleable and can be very efficient. There are various tools used to create them, including Sketch, Affinity Designer, and Adobe Illustrator.

In this case, I traced the PNG logo in Illustrator and tidied it up to create an SVG. The result is nice and efficient. Here it is in full:

<svg width="100%" height="100%" x="0px" y="0px" viewBox="0 0 313.3 321.4" style="enable-background:new 0 0 313.3 321.4;" xml:space="preserve">
  <path class="layer layer1" d="M157.1,0c3.8,0,7.9,1.5,11.4,3.2c45.6,21.1,91.2,42.4,136.7,63.8c3.3,1.5,8,2.1,8.1,7c0.1,5-4.7,5.6-7.9,7.1
c-45.8,21.5-91.7,42.9-137.6,64.3c-7.4,3.4-14.8,3.5-22.2,0C99,123.6,52.3,101.9,5.8,80c-2.4-1.1-5.4-4-5.4-6c0-2,3.1-4.8,5.5-5.9
C52.4,46.2,99.1,24.4,145.8,2.8C149.1,1.2,154.5,0,157.1,0z"/>
  <path class="layer layer2" d="M156.6,235c-3.1,0-7.7-1.7-11.3-3.3c-46.5-21.6-93-43.3-139.4-65.1c-2.4-1.1-5.8-4.1-5.6-5.8c0.3-2.4,3.2-5,5.7-6.3
c7.5-4,15.3-7.3,23-10.9c7.9-3.7,15.7-3.6,23.6,0.1c30.4,14.3,61,28.4,91.4,42.7c8.6,4.1,16.8,4,25.4-0.1
c30.4-14.3,60.9-28.4,91.4-42.7c7.7-3.6,15.4-3.7,23.1-0.1c8.2,3.8,16.4,7.4,24.4,11.5c2.1,1.1,4.9,3.7,4.7,5.4
c-0.2,2.1-2.7,4.8-4.9,5.9c-46.8,22.1-93.7,44-140.7,65.8C164.2,233.5,159.9,235,156.6,235z"/>
  <path class="layer layer3" d="M156.8,321.4c-4.6,0-9.3-2.3-13.4-4.2c-45.2-20.9-90.3-42-135.4-63.1c-3.3-1.5-8-2.1-8-7.1c0-5,3.8-5.5,7-7.1
c13.9-6.5,14.9-6.5,21.8-9.8c8-3.8,16-3.7,24.1,0.1c29.9,14,59.8,27.7,89.6,41.9c9.6,4.6,18.5,4.7,28.2,0.1 c29.8-14.2,59.8-27.9,89.6-41.9c8.2-3.9,16.3-4,24.5,0c7.8,3.8,15.8,7.2,23.5,11.1c2.1,1.1,4.8,3.3,4.8,5.4
c-0.1,2.4-2.7,4.8-4.9,5.9c-32.2,15.3-64.5,30.3-96.8,45.4c-13.9,6.5-27.7,13.1-41.7,19.3C165.7,319.2,161.5,321.4,156.8,321.4z"/>
</svg>

Here's the result:

Download this SVG here

Styling SVG layers

You may have noticed the class parts of the SVG. I added these so that I can style the SVG using CSS.

There are some attributes we can style with CSS, including stroke, fill and even adding CSS filters. For this example I'll be working on the fill property, which is like background-color.

One thing worth noting: When we reference SVG images using the img tag, we can't style the contents of the SVG with CSS. In this example I'm including the text of the SVG file directly in the source. This allows the CSS to work on it.

We can give the layers the Buffer grey colour using this CSS:

.layer {
  fill: #4b4b4b;
}

Animating

We can use keyframe animation to create the loading animation effect. When planning out animations like this, I like to turn to pen and paper and structure the animation. The goal is to have 3 animations, all looping in sync.

Keyframes describe animations as a series of steps from 0% to 100%. To illustrate this, I've marked out the areas where the layers need to be "on" to create a similar effect to the animated GIF.

We'll create three sets of keyframes, one for each of the layers:

@keyframes layer1 {
  0%, 65% {
    fill: #b2b2b2;
  }
  75%, 82% {
    fill: #4b4b4b;
  }
  92%, 100% {
    fill: #b2b2b2;
  }
}

@keyframes layer2 {
  0%, 40% {
    fill: #b2b2b2;
  }
  50%, 86% {
    fill: #4b4b4b;
  }
  96%, 100% {
    fill: #b2b2b2;
  }
}

@keyframes layer3 {
  0%, 15% {
    fill: #b2b2b2;
  }
  25%, 90% {
    fill: #4b4b4b;
  }
  100% {
    fill: #b2b2b2;
  }
}

Each layer begins with the lighter grey (#b2b2b2) and then animates to the darker grey (#4b4b4b). I've also staggered the end of each animation so that it looks like the darker colour descends from the top to the bottom before repeating.

With the keyframes in place, we need to apply them to the layers.

.layer {
  animation: 4s linear infinite;
}

.layer1 {
  animation-name: layer1;
}

.layer2 {
  animation-name: layer2;
}

.layer3 {
  animation-name: layer3;
}

This applies each of those three sets of keyframes to the correct layer.

Scaling it down

Let's see how it sits alongside the real logo:

Pretty sweet!

The result is small (~3Kb in total including CSS, using Gzip), scales to retina and beyond, and can be easily changed in CSS if needed. The animation can also be stopped using a little JavaScript rather than swapping out another image. See this in action in the demo.

Taking it further

Since we've used CSS to set up the animation, we can try variations without changing the SVG file.

Download the files

You can download the finished HTML and CSS here.

Browser compatibility

Thankfully SVG has become mainstream. A site I often check for these things is CanIUse.com. Here we see decent support for SVG across all modern browsers. However if you want to make sure your visitors in older browsers have a good experience, I'd recommend using Modernizr and serving a static image.

Portal CSS

2015-07-08T00:00:00Z

You don't need JavaScript to create impressive 3D projects in the web browser. In this post I will show how to create and animate a Portal-inspired scene using only CSS.

See the online Portal CSS demo, and download the source on Github.

Portal Orientation Video No. 1

As an example to show the various stages of creating, styling and then animating a 3D scene, this post will aim to recreate a scene from the Portal Training Video. In particular, the stylised, cartoony look of the first part of the video in which a silhouetted character jumps through a portal and emerges from the other side. This is the original video:

This video blew my mind when it was first released. Portal (which was developed from Narbacular Drop) introduced a fun twist on the 3D platform genre.

The isometric, cartoony graphics in the introduction video are very different from the game yet manage to capture some of it's style. In this post I will see if this cartoony style can be reproduced using nothing but HTML and CSS.

In particular, this is the scene that will be created:

A quick note on prefixes

I've removed the prefixed versions of rules in the following CSS. I would recommend either using something like prefix free or SASS to manage these for you. Otherwise, be aware that most browser prefixes will need to applied. Full versions of the CSS and SASS can be found on Github along with the HTML.

There's science to be done

The following project has been developed and tested primarily in Chrome. It uses CSS that won't work properly in Internet Explorer. It covers some interesting 3D CSS techniques that while they aren't yet mainstream, can prove useful in other front-end development.

Getting started

We need to set a scene in which we can build our 3D creation. To do this we'll need to use an HTML element and give it the needed properties that tell the browser to expect 3D content within it. Start with some HTML:

<article class="container">...</article>

In this case the container is an article tag. In HTML5, article represents a standalone piece of content that could be reproduced elsewhere and still make sense.

The first property to apply is perspective. This property takes a value in pixels, and represents the depth of the 3D scene. A smaller value will produce a more dramatic effect, and it's usual to set it somewhere betweeh 800 and 1,200 pixels.

For this scene to feel like it's a large room, we will set the perspective value quite high at 2,600 pixels. Ignoring the various browser prefixes, we use the following:

article.container {
  perspective: 2600px;
}

Vanishing point

The container for the scene has a depth, so the next step is to determine the viewing angle. By adjusting the perspective-origin property, we can establish the scene's vanishing point, and determine whether we're looking down at the object or from the side.

.container {
  perspective-origin: 50% -1400px;
}

The perspective-origin property takes two values, a horizontal and a vertical offset. In this case we're setting it half-way across the scene, and 1,400 pixels up. This will result in our point of view being above the object, looking down.

To determine these values, I adjusted the value in the Chrome web inspector panel and judged it by eye. When setting up your scene, your value might be higher or lower than this. It will depend on the effect you want to convey. Also keep in mind that this value can be animated, creating some interesting perspective-change effects.

No vectors, Victor

The objects we position in HTML are normal HTML elements. They have a width, height, and are rectangular. This means that as you build a 3D object, you place each rectangle in place. This differs from some other methods that involve describing points and lines to create shapes. It also means that there aren't as many primatives, such as circles or cubes, to draw upon.

The HTML elements are placed within the 3D scene using the transform property.

Transforming

The transform property consists of a series of adjustments to the HTML element. These adjustments can take the form of translate to move the element, rotate to adjust it's angle, skew and even scale. Each of these can be stacked to create more complex transforms, for example:

.example {
  transform: rotateY(45deg) translateZ(-100px);
}

This rule will rotate an element 45 degrees around the Y axis, then move it back 100 pixels on the Z axis. The effect would look like this:

Transform origin property

When rotating elements around the place, it's worth keeping in mind that the transforms have an origin that can be set. The transform origin is a point referred to by specifying the X, Y and Z values. This is the default:

.default-origin {
  transform-origin: 50% 50% 0;
}

When building this example I kept the default but it's worth knowing that it's there.

Let's build

With the scene set, we can start putting together our 3D masterpiece. When beginning to build 3D objects with HTML and CSS, it's worth taking a moment to understand how this approach differs from other 3D software.

<section class="stage">
  <div class="shadow"></div>
  <div class="back-left"></div>
  <div class="back-right"></div>
  <div class="platform-left"><span></span></div>
  <div class="platform-right"><span></span></div>
  <div class="pit-left"></div>
  <div class="pit-right"></div>
  <div class="pit-back"></div>
</section>

The above includes a stage section, which we will be using to contain all the elements. A set of divs within the stage section form the main parts of the structure. They take the form of back pieces, platforms, the sides of the pit, and a shadow to place underneath them.

When I started building this scene, I tried to place the walls directly onto the stage, rotating it and adjusting its position. However since the scene is being viewed from an isometric angle, an easier approach is to place the parts of the scene and then rotate the entire scene 45 degrees at once.

With that in mind, the HTML elements are transformed into place according to the following sketch:

As the sketch shows, the back-left piece is aligned to the left, but the back-right piece is right in front of the viewer. To adjust for this, we'll rotate the entire stage 45 degrees later.

Before applying transforms however, we need to give the divs some shared properties:

.stage div {
  position: absolute;
  transform-style: preserve-3d;
}

Each div will be positioned absolutely, and the transform-style property to instruct the browser that 3D transforms are to be applied in relation to the perspective we set earlier.

With this done we can start positioning divs:

.stage .back-left {
  background-color: #6b522b;
  border-left: 6px solid #574625;
  border-top: 6px solid #8a683d;
  height: 120px;
  transform: rotateY(90deg) translateX(-256px);
  width: 500px;
}

The above rules describe a width of 500 pixels, which is the side length of our 3D scene, a height of 120 pixels and a light brown background colour. The div is then rotated 90 degrees and pushed back along the X axis. The div has a 6 pixel border applied to create the illusion of depth.

A similar transform is applied to the back-right div:

.stage .back-right {
  background-color: #9c7442;
  border-right: 6px solid #78552c;
  border-top: 6px solid #b5854a;
  height: 120px;
  transform: translateX(253px) translateZ(3px);
  width: 446px;
}

This div is a little smaller, as it looks like the room in the original Portal video is not quite square.

Next, add in some platforms and the sides of the pit:

.stage .platform-left {
  background-color: #bcb3a8;
  border-bottom: 6px solid #857964;
  height: 220px;
  transform: rotateX(90deg) translateY(396px) translateX(253px) translateZ(-13px);
  width: 446px;
}
.stage .platform-right {
  background-color: #bcb3a8;
  border-bottom: 6px solid #847660;
  border-right: 6px solid #554c3d;
  height: 164px;
  transform: rotateX(90deg) translateY(88px) translateX(253px) translateZ(-41px);
  width: 446px;
}
.stage .pit-left {
  background-color: #4d4233;
  height: 800px;
  transform: translate3D(254px, 125px, 285px);
  width: 447px;
}
.stage .pit-right {
  background-color: #847660;
  height: 800px;
  top: -1400px;
  transform: translate3D(254px, 125px, 173px);
  width: 451px;
}
.stage .pit-back {
  background-color: #6b522b;
  height: 220px;
  transform: rotateY(90deg) translate3D(-200px, 87px, 168px);
  width: 170px;
}

The end result of all this should be a scene that looks like this:

It doesn't look right yet. We need to rotate the entire scene to see it properly. Add a transform to the scene section:

.stage {
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateY(-45deg);
  width: 460px;
}

The result should look more like this:

You may notice that the borders create a nice depth effect, particularly at the corners, where the different coloured borders meet with a 45 degree angle. Since the scene we're building is to be viewed at 45 degrees, this effect works to our advantage in most cases. A few of the corners don't quite look right, but considering how straightforward the borders are to apply, and the lack of images, I feel this is a reasonable compromise.

In the shade

The video features a nice shadow beneath the platforms. We can reproduce this using the CSS box-shadow property.

.stage .shadow {
  background-color: transparent;
  box-shadow: -600px 0 50px #afa79f;
  height: 550px;
  transform: rotateX(90deg) translateZ(-166px) translateX(550px);
  width: 550px;
}

The rules above add a box shadow to the shadow div, which is itself transparent. The box shadow is offset by 600 pixels so that the actual shadow div doesn't get in the way of the shadow. The whole lot is rotated and positioned off-stage, so that only the shadow part is visible on the stage. The result should be something like this:

Red VS Blue

Next up we need to add some decoration and the glowing portals.

The HTML needed for the two portals is simple enough:

<div class="portal red"></div>
<div class="portal blue"></div>

There is a div for each of the two portals, one red and the other blue. They both have a similar style, with gradients used to create glowing effect. Since they are only one HTML element, the CSS includes a pseudo-element we can style to achieve the full effect.

The first step is to establish the general portal shape:

.stage .portal {
  background-color: black;
  border-radius: 44px/62px;
  box-shadow: 0 0 15px 4px white;
  height: 72px;
  width: 48px;
}

This sets up the portal and uses the border-radius property to create an oval shape, and a white box shadow creates a glow. A pseudo-element is then added that has similar dimensions, and the white border:

.stage .portal:before {
  border-radius: 44px/62px;
  border: 4px solid white;
  content: "";
  display: block;
  height: 72px;
  margin-left: -4px
  margin-top: -4px;
  width: 48px;
}

So far these styles have both applied to portals in general. Since one is red and the other blue, we'll use separate sets of CSS rules to describe the characteristics specific to each. Firstly, the red portal:

.stage .portal.red {
  background: radial-gradient(#000000, #000000 50%, #ff4640 70%);
  border: 7px solid #ff4640;
  transform: translate3D(223px, 25px, 385px) rotateY(90deg) skewX(5deg);
}
.stage .portal.blue {
  background: radial-gradient(#000000, #000000 50%, #258aff 70%);
  border: 7px solid #258aff;
  transform: translate3D(586px, 25px, 4px) skewX(-5deg);
}

The red portal is given a background radial gradient and a red border. The transform in this case rotates it and places it on the left wall. The blue portal is similar but has a blue gradient applied and is positioned on the right wall. Both looked a little off in testing, so I added a 5 degree skew effect that seemed to make them look a little better.

Portal glow

The HTML we added earlier included a span tag within each of the two platforms. These spans were added so that they could be styled with a radial gradient to provide a glowing effect beneath each portal.

.stage .platform-left span {
  background: radial-gradient(left, #f3cac8, #c8b8ad 70px, #bcb3a8 90px);
  display: block;
  height: 200px;
  left: 0;
  position: absolute;
  width: 120px;
}
.stage .platform-right span {
  background: radial-gradient(top, #cdebe8, #c2cbc1 40px, #bcb3a8 60px);
  display: block;
  height: 60px;
  left: 280px;
  position: absolute;
  width: 150px;
}

The two spans are positioned absolutely and given a red and blue gradient, positioned beneath each of the portals. A pseudo-element could have been used to achieve this effect, but since animating pseudo-elements is not well supported (even within versions of Webkit), a separate span is used in this case.

The Door

One of the unexpected successes was the use of borders to create what looks like an opening in the right wall, representing the exit. To create this door I use a single div and some coloured borders that make it look like it's inset.

The door HTML is straightforward. Add the following within the stage section.

<div class="door"></div>

Styling the door involves a few borders and then a transform that positions it in front of the right wall:

.stage .door {
  background: #efe8dd;
  border-bottom: 6px solid #bcb3a8;
  border-left: 7px solid #78552e;
  height: 85px;
  transform: translate3D(450px, 34px, 4px);
  width: 65px;
}

Two borders are used to create the effect. The bottom and left borders match the platform and the side of the right wall, giving the impression of depth. Since there is no top border specified, the left border stops flush with the top of the div, which in this case works well.

Characters

With the portals and door in place, we need a person to jump through one and arrive on the other side. The first step is to create the person that jumps through the two portals.

In my initial testing, I tried using one character and having the animation stop at the first portal, and immediately continue from the other side. However when I animated the single character there was a flicker as it moved between portals. To avoid this, I instead used two characters and animated them separately.

Building the character

The beginning character shape is made up of 2 main parts, a head and body. Legs are added using pseudo-elements on the body. A similar structure is also included to be used as a shadow:

<div class="dude one">
  <figure class="head"></figure>
  <figure class="body"></figure>
  <div class="dude-shadow one">
    <figure class="head"></figure>
    <figure class="body"></figure>
  </div>
</div>

Since the shadow is contained within the character's containing div, it can be animated at the same time. The CSS is as follows:

.dude, .dude-shadow {
  height: 100px;
  width: 30px;
}
.dude figure, .dude-shadow figure {
  background-color: black;
  display: block;
  position: absolute;
}
.dude figure.head, .dude-shadow figure.head {
  border-radius: 22px;
  height: 20px;
  left: 3px;
  top: 0;
  width: 20px;
}
.dude figure.body, .dude-shadow figure.body {
  border-radius: 30px 30px 0 0;
  height: 30px;
  top: 21px;
  width: 26px;
}
.dude figure.body:before, .dude figure.body:after, .dude-shadow figure.body:before, .dude-shadow figure.body:after {
  background-color: black;
  content: "";
  height: 15px;
  position: absolute;
  top: 30px;
  width: 9px;
}
.dude figure.body:before, .dude-shadow figure.body:before {
  left: 3px;
}
.dude figure.body:after, .dude-shadow figure.body:after {
  left: 14px;
}

These rules double up in each case, describing both the character and their shadow. Each of the parts is absolutely positioned and border-radius is used to create the round shapes. The leg pseudo-elements are described at once then each positioned in separate rules.

Character 1

With the character shape specified, position the character at the starting position:

.stage .dude.one {
  transform: translate3D(514px, 50px, 375px) rotateY(78deg);
}
.stage .dude-shadow.one {
  opacity: 0.1;
  transform: translateX(-12px) rotateX(90deg) translateY(8px);
}

The CSS transforms position both the character itself but also the shadow. The opacity of the shadow is set to 0.1 rather than set it a grey colour. This allows background details to be seen behind the shadow.

The first character is now at the starting position, and rotated to a similar angle to that in the video. We will add animation later to have them jump through the portals.

Armed

The second character has some more detail, arms. The idea being when the character jumps through the portal, they'll celebeate by raising their arms. Here's the HTML:

<div class="dude two">
    <figure class="head"></figure>
    <figure class="body"></figure>
    <figure class="arm left"></figure>
    <figure class="arm right"></figure>
    <div class="dude-shadow two">
        <figure class="head"></figure>
        <figure class="body"></figure>
        <figure class="arm left"></figure>
        <figure class="arm right"></figure>
    </div>
</div>

The second character will begin the animation invisible, and then jump through the portal about halfway through the animation (after the first character reaches their portal). To set this up, this second character is positioned at the portal.

.stage .dude.two {
  transform: translate3D(610px, 40px, 10px) rotateY(15deg);
}
.stage .dude.two figure.arm {
  background: black;
  height: 8px;
  position: absolute;
  top: 20px;
  width: 20px;
}
.stage .dude.two figure.arm.left {
  left: -13px;
  transform: rotateZ(40deg);
}
.stage .dude.two figure.arm.right {
  right: -10px;
  transform: rotateZ(-40deg);
}
.stage .dude-shadow.two {
  opacity: 0.1;
  transform: translateY(12px) translateX(-16px) translateZ(-6px) rotateZ(-90deg) rotateY(90deg) rotateZ(50deg) skewX(30deg) scaleX(0.8);
}

A second animation will be applied to the arms, in which they will also be invisible to begin with but then appear later.

The stage is set

With the characters and the backdrop in place, the scene is ready for some animation.

Let's look at how to make it look like the little person jumps through the first portal and arrives at the other.

Animation

If you view the demo you'll see a few animations taking place. Rather than go through all the animations that set up the scene, I'll focus on the animation of the character jumping through the portals.

Keyframe animation

Timing and animating the HTML elements is achieved by using keyframes, and then attaching the set of keyframes to an element using the animation property.

The first thing is to animate the first character, to have them approach and then jump into the left portal. Here's a set of keyframes that achieves this:

@keyframes move-dude-one {
  /* Character flies into scene */
  0% {
    transform: translate3D(514px, -10px, 375px) rotateY(78deg) scaleY(2);
  }
  /* Waits a moment */
  1%, 18% {
    opacity: 1;
    transform: translate3D(514px, 50px, 375px) rotateY(78deg) scaleY(1);
  }
  /* Moves toward the portal */
  34%, 39% {
    opacity: 1;
    transform: translate3D(284px, 40px, 375px) rotateY(78deg);
  }
  /* Pauses, them jumps in */
  41%, 42% {
    opacity: 1;
    transform: translate3D(234px, 40px, 375px) rotateY(78deg);
  }
  /* Vanishes */
  43%, 100% {
    opacity: 0;
    transform: translate3D(234px, 40px, 375px) rotateY(78deg);
  }
}
/* Note: Use prefixes, such as @-webkit-keyframes, @-moz-keyframes, etc! */

Keyframes are a series of steps, described using percentages. The percentage relates to the animation time, so that if an animation was to last 10 seconds, 10% would be the 1 second mark. 90% would be the 9 second mark.

To have the characters jumping through the portals in a nice loop, we'll set two animations that are each 10 seconds long so that they match. I have put some inline comments that describe each stage of the animation. The transform property is used at each stage to set the characters position and angle.

At 43% through the animation, the character's opacity is set to 0. This is when the first character vanishes into the portal. The second character should therefore appear at 43% through it's animation.

Before we do that, let's apply this first animation to the first character:

.dude.one {
  animation: move-dude-one 10s linear infinite;
  opacity: 0;
}

The animation property above applies the animation to the dude one element. It attaches it with the animation name, sets it to last for 10 seconds, and suggests that it loop infinitely.

An opacity of 0 is set to ensure the character is invisible before the animation starts.

Having done that let's set up the corresponding animation keyframes for the second character:

@keyframes move-dude-two {
  /* Dude be invisible */
  0%, 42% {
    opacity: 0;
    transform: translate3D(610px, 40px, 10px) rotateY(15deg);
  }
  /* Apparato! */
  42.5% {
    display: block;
    opacity: 1;
    transform: translate3D(610px, 40px, 10px) rotateY(15deg);
  }
  /* Move onto the platform */
  46%, 75% {
    opacity: 1;
    transform: translate3D(610px, 40px, 120px) rotateY(15deg);
  }
  /* Stand there for a bit */
  76%, 97% {
    opacity: 0;
    transform: translate3D(610px, -10px, 120px) rotateY(15deg) scaleY(2);
  }
  /* Fly up into the sky! */
  98%, 100% {
    opacity: 0;
    transform: translate3D(610px, -10px, 120px) rotateY(15deg) scaleY(2);
  }
}

@keyframes arms {
  /* No arms */
  0%, 53% {
    opacity: 0;
  }
  /* Yes arms! */
  54%, 100% {
    opacity: 1;
  }
}

As planned, this animation begins around the 42% mark. The character leaps out of the portal, stands around for a bit, then is whisked away into the sky. A second set of keyframes describe the arms animation. These start off invisible and then show around halfway through the animation.

We can apply these keyframes to the second dude's element as follows:

.dude.two {
  animation: move-dude-two 10s linear infinite;
  opacity: 0;
}

.dude.two figure.arm {
  animation: arms 10s linear infinite;
  opacity: 0;
}

In this way the two animations are being applied. Since both are set to last 10 seconds, and loop infinitely, they should match up nicely with the timing of the first animation.

If you haven't already, check out the finished result in a modern browser, though preferably not Internet Explorer.

Caveats & browser quirks

While we're on the subject of browsers, I should note that this is not going to work currently in Internet Explorer. Firefox is a bit meh but not bad, Safari's almost there (waiting for Apple to patch webkit at long last), and Chrome is 100%. Hey, browsers gonna browse.

Performance is pretty good across various devices (browser issues aside). Testing on an iPhone with Safari and it performs better than Chrome on a laptop. This is because the CSS rules used (3D transforms) make use of the graphic hardware.

Demo and contact info

Check out the online Portal CSS demo or download the source from Github.

Spheres

2015-08-22T00:00:00Z

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let's try that, and add some animation to bring them to life.

Flat design

There are two ways we could approach making spheres with CSS.

One is to create an actual 3D sphere using lots of elements. There are some beautiful examples of these. A potential downside though is that these require the browser display many elements, which can impact performance. They also tend to look a bit rough as a smooth sphere would require many elements.

Instead of this I'll try a second approach, making use of CSS gradients to add shading and create the 3D effect on a single element.

Demo and source code

All the examples mentioned can be found via my Codepen account, or by selecting the "Edit on Codepen" links in each example below.

In the code examples, I've left out any browser prefixes. I'd recommend using a tool like Autoprefixer, or add in prefixes as needed.

Basic shape

Before adding details, we'll create the initial circle shape. Begin with the HTML:

<figure class="circle"></figure>

We're using an figure element here, but it could be any element. Figure is an element used in HTML5 to represent an image or diagram that is a part of the content that could be removed without affecting the content's meaning.

To create a circle from this figure element, I'll give it a width and height, and a border radius of 50%. Anything over 50% will result in a fully rounded corner.

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
}

A circle appears.

Now that we have a basic circle, we can start to style it up into something more spherical.

Shading 101

The first thing most 3D-sphere tutorials do is add a single radial gradient, slight up and to the left of the center of a circle.

We can do this using the following CSS:

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}

You should get something like this:

Radial gradients

The radial-gradient property takes a few arguments. The first is the center position for the start of the gradient. This follows the form *shape* at *position*. In this case case, it's a circle with it's center position 100 pixels in from the left and 100 pixels from the top.

Next a series of colours is specified. You can specify more than two colours, but it is then necessary to include a distance with each one so that the gradient knows when to blend each colour into the next.

In this example just two colours are specified. This lets the browser assumes the first is 0% and the latter is 100%, and it draws the gradient between these to colours. If we wanted other steps in the gradient, we could specify distances in pixels or percentages, as you'll see later.

So we have something that looks a bit 3D-ish. It's ok, but let's try to make it look a bit nicer.

Shadows & 3D

Depending on what sort shading you apply to the surface, you can create different looking spheres. First though let's set up a scene to place the ball in.

The HTML we'll use for this has a couple more elements:

<section class="stage">
  <figure class="ball"><span class="shadow"></span></figure>
</section>

The "ball" element has been given a span which we'll use to create a shadow, and it has been wrapped in a stage div. The stage div is useful when we want to set some perspective and position the shadow, making it look more 3D.

Apply some styles to the stage and position a shadow to set the scene.

.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}

Note that I'm not showing prefixes in this examples CSS. The Codepen examples contain fully prefixed CSS. In the above I set up the stage div to have perspective of 1,200 pixels. The perspective property is like the vanishing point in a 3D scene.

The ball's shadow is then placed by giving it a radial gradient, but then positioning it using a transform. Transforms in CSS let you rotate, scale, move or skew things in a 3D space. The shadow is rotated 90 degrees on the X axis, and then is pulled down 150 pixels to the base of the ball.

Since we established a perspective value on the stage container, we end up looking down on it and can see it as a stretched oval shape.

It's starting to look a bit better now. Let's add more shading to the ball itself.

Multiple shaders

Very rarely in the real world would you find objects lit from just one angle. Surfaces reflect light onto other surfaces and the end results in various light sources mixed together. To create a more realistic looking ball, we'll make it look light there are two light sources by using a pseudo-element to add two gradients.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  filter: blur(5px);
  z-index: 2;
}

Here we have two slightly more complex gradients.

The first gradient is a subtle under-lighting effect and it applied to the ball element. The center of the gradient is positioned half-way across and at 120% of the ball's height. This places the center off the ball's surface. I did this so that the sharp ending colour wasn't visible, resulting in a smoother gradient.

The second gradient is a highlight, placed at the top. It's set to be 90% of the ball's width and 90% of its height. The gradient is centered at the top so that it fades out at around halfway down the ball.

I've used the before pseudo-element rather than create a new element to contain the shading.

Since this highlight gradient has a sharp edge, I've made use of the blur effect to soften the highlight. Unfortunately this is currently only a webkit feature (Chrome and Safari) but it may be more useful in future across other browsers.

Both gradients combine to create a much nicer effect:

Shinier

The effect so far is quite soft, so let's add some shine and create something more like a snooker ball.

To achieve this we'll make use of a soft under light as before, but adjust the top highlight to be smaller and sharper. We'll need to make use of two psuedo-selectors to contain the ball's colour, a bottom highlight and a reflection.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  filter: blur(5px);
  z-index: 2;
}
.ball:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  filter: blur(10px);
}

Here we have the initial colour being applied as a subtle gradient on the ball itself. The before pseudo-element contains a lighter highlight, which again starts at the bottom of the ball and creates the effect of reflected light from the surface.

The new addition here is the after psuedo-selector. It contains a circular gradient that starts almost opaque white at the center, and fades to transparent at around the 24% mark. This creates a white shiny effect, but to make it look like it's reflecting off a three dimensional object, we apply a CSS transform.

The transform moves the shine effect left 80 pixels then up 90 pixels, and to adds a skew effect. The skew effect stretches the circle along the X-axis, so that it looks more like the sheen you'd find on a shiny ball.

8-ball

While we're making a pool ball, let's go the extra step and add the number 8.

We'll need an extra element to contain the 8, as well as some styles to place it on the ball.

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="eight"></span>
  </figure>
</section>

.ball .eight {
  width: 110px;
  height: 110px;
  margin: 30%;
  background: white;
  border-radius: 50%;
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
}
.ball .eight:before {
  content: "8";
  display: block;
  position: absolute;
  text-align: center;
  height: 80px;
  width: 100px;
  left: 50px;
  margin-left: -40px;
  top: 44px;
  margin-top: -40px;
  color: black;
  font-family: Arial;
  font-size: 90px;
  line-height: 104px;
}

The 100% border radius is again used to create a circle, and this circle is positioned at the top right using the transform property. Rather that put the number 8 into the content, I'm using the before psuedo-selector to add the content via CSS, and then skewing the number in a similar way to the containing circle.

The result is a shiny 8-ball.

Got my eye on you

One of the great things about CSS transforms is that they can be animated. Using CSS keyframes for animation, you can describe a series of transforms as an animation and apply that to an element. To show this, I'll create and animate an eyeball.

First step is to adjust some of the colours use in the 8-ball example. A few tweaks and it's looking a lot more like an eye. First, the HTML:

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="iris"></span>
  </figure>
</section>

The bulk of the CSS is similar to the 8-ball, with the exception of the iris and pupil parts.

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
}
.iris:after {
  content: "";
  display: block;
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 18.75%;
  left: 18.75%;
  background: rgba(255, 255, 255, 0.2);
}

A blue gradient forms the coloured part of the iris, and then the pupil and a highlight are created as pseudo-elements. I've also added the animation property to the iris element. Animations are attached to elements using a format like this:

animation: animation-name 5s ease-out infinite;

In this case we'd be applying an animation called "animation-name", setting it to last 5 seconds, loop indefinitely, and applying an easing value of "ease-out". Ease-out is when the animation slows down as it reaches the end, creating a more natural effect.

Without the animation yet created, we have a very static eyeball.

Lets create some keyframes to describe how the eyeball should move.

@keyframes move-eye-skew {
  0% {
    transform: none;
  }
  20% {
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
  }
  25%, 44% {
    transform: none;
  }
  50%, 60% {
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
  }
  66%, 100% {
    transform: none;
  }
}

Animation keyframes in CSS can seem tricky at first. What you're doing is describing the state of the element at a series of stages. Each state is mapped to a percentage. In this case the iris will begin with no transforms applied. Then at 20%, a transform will apply in which it is moved and skewed to the left. The gap between 0 and 20% is automatically calculated by the browser, creating a smooth transition between these two points.

This continues across each of the keyframes, and the entire animation in this case takes 5 seconds, as specified earlier.

Don't forget to create moz, ms, o and non-prefixed versions of keyframe animations as some browsers need the prefixes.

Bubbles

Using a combination of shading and animation can produce all sorts of interesting and varied effects. How about some bubbles?

Creating the bubble look is similar to before, using more transparency in the main colour and two pseudo-elements to add shine.

The animation makes use of the scale transform to make the entire bubble wobble.

@keyframes bubble-anim {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scaleY(0.95) scaleX(1.05);
  }
  48% {
    transform: scaleY(1.1) scaleX(0.9);
  }
  68% {
    transform: scaleY(0.98) scaleX(1.02);
  }
  80% {
    transform: scaleY(1.02) scaleX(0.98);
  }
  97%, 100% {
    transform: scale(1);
  }
}

The animation applies to the entire bubble and its pseudo-elements.

Using images

So far all the balls have been created without using any images. Applying a background image can add more detail, and still take advantage of the CSS shading within the pseudo-elements. For example, an unshaded texture of a tennis ball:

Adding some CSS gradients can create the illusion of depth.

Around the world

Animation can also be applied to the position of background images. Using this we can create a spinning globe.

This flat image was stretched a little at the top and bottom to be used as a background image.

With some shading and animation added, a 3D-style globe can be created. Select "Result" in this Codepen to see it in action. I've set it to display the HTML by default as the performance on this example was pretty slow, causing the fan to kick in on my development laptop.

Note: Many thanks to Sidoruk Sergey ‏(@Sidoruk_SV) for upgrading this globe. It's looking great.

Resources

Some good info about radial gradients in case you'd like to know more.

Looking for more 3D examples? Check out Portal CSS for inspiration.

Feedback

All the examples mentioned can be found via my Codepen account. Many thanks to Chris and the team for making such a fantastic resource.

If you have any questions about the above, get in touch by email or on Twitter.

Zelda: A link to the CSS

2015-11-17T00:00:00Z

The Zelda games have always been close to my heart. In this post, we'll try to recreate the iconic introduction to what might be the best game ever, A Link to the Past.

Zelda: Linked to the Past

The idea is to create something that would look like this:

Getting started: HTML

To get started, I created the HTML structure to which I'd be applying the styles. The layout requires three 3D triangles, and some text to sit on top. I began with a single triangle:

<div class="stage">
  <div class="triangle">
    <div class="front"></div>
    <div class="back"></div>
    <div class="side1"></div>
    <div class="side2"></div>
    <div class="side3"></div>
  </div>
</div>

The front and back pieces needed to be triangular, with 3 rectangles covering the left, right and bottom sides. HTML isn't great at producing shapes other than rectangles, but we can create a triangle shape using borders.

[TODO: Explain the CSS behind creating a triangle]

Setting the stage

Once we have the shape in place, we'll need to place a back piece and position them both in 3D space. A containing "stage" div is needed to achieve this. We can apply a perspective value to the stage and any objects on it will be then drawn in relation to each other.

```html

```

.stage
  @include perspective(800px)
  @include perspective-origin(120% -200px)

figure.front
  +arrow(150px, 150px, up, #ffe403)
  @include transform(translateZ(80px))

figure.back
  +arrow(150px, 150px, up, #ffd200)
  @include transform(translateZ(-80px))

The 3D positioning is achieved by using the translateZ transform. The front face is brought forward 80 pixels and the back face pushed back 80px.

I also rotated the back panel 180 degrees on the Y axis so that it now faces out toward the back.

The perspective value relates to the depth of the scene, and larger values produce more extreme distortion. Similar to this, the perspective-origin value is used to move the viewpoint. In this case, the viewpoint is looking down from 200 pixels up, and from off to the right side of the stage.

Sides

With the front and back in place, there are gaps to fill on the sides. To fill these, rectangular divs can be positioned like so:

```html

```

figure
  &.side1
```
content: " "
display: block
position: absolute
height: 168px
width: 40px
background-color: #ffd200
@include transform(translateY(-9px) translateX(18px) rotateY(-90deg) rotateX(26.5deg))
```
&.side2
content: " "
display: block
position: absolute
height: 168px
width: 40px
background-color: #ffd200
@include transform(translateY(-9px) translateX(92px) rotateY(90deg) rotateX(26.5deg))

&.side3
content: " "
background-color: #ffd200
width: 150px
height: 40px
@include transform(translateY(130px) rotateX(-90deg))

One small adjustment made in this example was to rotate the back panel 180 degrees to ensure it was facing outwards. With the back-faces hidden, it would have been invisible otherwise.

Three triangles

With one triangle done, it was straightforward to position three of them on the stage. I copied the div called "triangle" above, and replicated it three times. I then added a class "one", "two" and "three" to each so they could be referenced individually:

```html

```

.triangle
  @include animation(rotate 5s infinite linear)
&.two
top: 150px
left: 0

&.three
top: 150px
left: 150px

Styling the text

To create the proper Zelda atmosphere, the right fonts were needed. For the main font, EB Garamond seemed a decent choice. The smaller text looks good with Old Standard TT.

Including these fonts involves referencing them in the head of your HTML:

<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>

You can then use them in your CSS:

h1
  font-family: "EB Garamond"

The finishing touch was to add a border around the text:

```html

ZELDA

```

.zelda-style
  font-family: "EB Garamond"
  @include text-fill-color(#b62f22)
  @include text-stroke-color(#8b3536)
  @include text-stroke-width(2px)
  margin: 10px auto

Bringing it together

To achieve the animation I put together a few different animations and timed them so that they all worked together. Using keyframe animation in CSS is made much easier by using SASS, and I used a few basic mixins to make the process easier. I’m using Sass with the Compass framework, but to add support for animation and keyframes to Compass, you’ll need this gist.

Animation 1: Rotating

The spinning effect is creating using the following keyframes:

@include keyframes(rotate)
  0%
    @include transform(rotateY(0))
  100%
    @include transform(rotateY(360deg))

To apply this animation to the figures, the following SASS is used. Note, it makes use of the "animation" mixin found here:

figure
  @include animation(rotate 5s infinite linear)

This calls the "animation" mixin and passes in the name of the keyframes (rotate), the duration of 5 seconds, repeated forever. It also specifies that the animation easing be "linear", which maintains a constant speed throughout the animation.

Animation 2: Tumbling triangles

The introduction of the figures sees them tumble into place. This is done by transitioning them from an initial position offset to the top, left or right, while applying 360 degrees of rotation. These combine in the following keyframes:

@include keyframes(introduce-1)
  0%
    top: -200px
    opacity: 0
  45%
    top: -100px
    @include transform(rotateY(180deg) rotateX(-180deg))
    opacity: 1
  90%, 100%
    top: 0
    @include transform(rotateY(360deg) rotateX(-360deg))

By putting the ending position of the animation at both 90% and 100%, it ensures that the animation stays still for a moment at the end of it's tumbling.

Applying both these to the figures at the same time looks like this:

@include animation(rotate 5s infinite linear, introduce-1 5s linear)

Animation 3: Text

The text overlay is invisible at first, and I wanted it to wait until after the tumbling animation had finished before fading into place. To achieve this, the following keyframes apply to the text:

@include keyframes(showZeldaText)
  0%, 80%
    @include transform(scale(0.6) translateZ(-100px))
    opacity: 0
    -webkit-filter: blur(2px)
  90%
    -webkit-filter: blur(0)
  100%
    @include transform(scale(1) translateZ(0))
    opacity: 1

For 90% of the time, the text is invisible. Then in the last 10% the text scales up from 60% scale to 100%, while the opacity changes from invisible to visible.

Since the text animation starts at the same time as the tumbling, it needs a longer time to run so that it lines up properly. In this case, I set it to run for 6.5 seconds:

@include animation(showZeldaText 6.5s linear)

With these in place, the last animation is the flash of background colour when the tumbling stops.

Animation 4: Background flash

The background starts black, then when the tumbling finishes, briefly flashes white before the background image is shown. This colour sequence is also timed to coincide with the appearance of the text. The keyframes:

@include keyframes(animate-background)
  0%
    background: #000
  83%
    background: #000
  84%
    background: #fff
  87%, 100%
    background: #000

A similar set of keyframes is used to show the background image after the screen flashes.

See it in action

Here's a live demo. It works reasonably in recent versions of Chrome, Safari and Firefox.

Have a go

The HTML and CSS is available on Github. Please fork, share, and have a play with it. If you'd like to add to or fix something, pull requests are a fast way to becoming one of my favourite people. Do it!

Issues

IE10 support is basic, so any browser support improvements would be a good thing. There's also a bit of a glitch where the tumbling animation on the elements doesn't always start. It seems to happen in all browsers. Any suggestions on fixing that would be appreciated.

I hope you enjoyed this post. I am more than happy to respond to questions and suggestions on Twitter at @donovanh.

Stereoscopic CSS

2015-11-17T00:00:00Z

For a while I've been blogging about making all sorts of 3D-style effects using CSS. In this post I take it one step further and try to make the scenes look even more three dimensional.

See the stereoscopic cube demo.

Stereoscopes

There are many techniques used to try to convey a 3D image from a screen. One of the oldest is the use of red and green (or blue) coloured film, which when watched through red/green glasses produces a 3D effect.

Simurai has put some work into this and created a nice CSS3D plugin to achieve it.

The downside to this is that the film can only be monochrome, as the colours are limited to being used to create the 3D effect.

Side-by-side stereoscopy

A second approach to presenting 3D is to make use of an ability some of us have to cross our eyes. The idea is to present two scenes side by side, each presented from a slightly different angle. If the viewer can cross their eyes, the two images combine to create a 3D effect.

While this may not work for everyone, it's great when it works and doesn't limit the number of colours a scene can include. Some photographs show this effect nicely.

To give it a go, try looking at the following image from about two feet away from your monitor. Gently cross your eyes until the two images merge together, and if you get them to line up just right, it should look like it's 3D.

This double-image technique is most notably used in the new Oculus Rift headset. While I don't have one to test this against, I believe it's possible to display HTML pages within the headset, so some form of this technique might be useful there.

Warning

Just a heads up, but if you are going to spend a lot of time staring at the screen with your eyes crossed, you might experience headaches. I know I did. Totally worth it though!

Set the scene

To get started we'll create a simple 3D scene using some HTML.

<div class="stage">
  <figure class="cube">
    <span class="back">S</span>
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="left">3D!</span>
    <span class="right">S</span>
    <span class="front">C</span>
  </figure>
</div>

We have a containing stage div here that will act as a stage for the cube to sit on, and within it the cube figure itself. The cube is made up of 6 parts.

The "stage" div is needed so that the browser can establish some important 3D-related settings, such as the depth of the scene and the angle we're looking into the scene at. These things we set with the CSS.

.stage {
  width: 480px;
  height: 500px;
  margin: 10px auto;
  position: relative;
  perspective: 1600px;
}

This CSS sets up the stage with some proportions and sets a perspective value. Perspective describes the depth of the scene, with smaller values producting more extreme-looking results. In this case, 1600 pixels looks pretty good, but you can try different values in your own scene to see how it feels.

Building the cube

The cube itself is made up of six elements. Using the CSS3 transform property, we can manipulate these spans in the 3D space and position them where we like. First though we need to tell the browser that our intention is to move things around in 3D. Some CSS achieves this.

.cube {
  transform-style: preserve-3d;
  transform-origin: 100px 50%;
  position: absolute;
  top: 120px;
  left: 140px;
}

The main parts to note here are the transform-style and transform-origin properties. These tell the browser that this and any child elements will be capable of transforming within the context of the "stage" figure, as well as describing the point around which any rotation, scaling or skewing can happen.

Next up we need to specify the dimensions of the cube faces, and then magic them into place using the transform property.

.cube span {
  color: white;
  display: block;
  font-size: 100px;
  height: 200px;
  line-height: 200px;
  opacity: 0.5;
  position: absolute;
  text-align: center;
  width: 200px;
}
.back {
  background-color: #f00;
  transform: rotateY(180deg) translateZ(100px);
}
.top {
  background-color: #ff7400;
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background-color: #aaa;
  box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}
.left {
  background-color: #099;
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  background-color: #0c0;
  transform: rotateY(90deg) translateZ(100px);
}
.front {
  background-color: #ff0;
  transform: translateZ(100px);
}

To make things more readable, I've removed the various "-webkit" and "-moz" prefixes from the tranform properties here.

This CSS describes the general rules for the spans, that they be 200 pixels wide for example, and have white text. The rules that follow rotate and position each of the various faces using rotate and translate. Each face is given a background colour also.

Making it stereoscopic

Now that we have a scene with a 3D object, we can double it up and make it stereoscopic. Start by doubling up the HTML into a left and right div.

<div class="container">
  <div class="left">
    <div class="stage">
      <figure class="cube">
        <span class="back">S</span>
        <span class="top"></span>
        <span class="bottom"></span>
        <span class="left">3D!</span>
        <span class="right">S</span>
        <span class="front">C</span>
      </figure>
    </div>
  </div>

  <div class="right">
    <div class="stage">
      <figure class="cube">
        <span class="back">S</span>
        <span class="top"></span>
        <span class="bottom"></span>
        <span class="left">3D!</span>
        <span class="right">S</span>
        <span class="front">C</span>
      </figure>
    </div>
  </div>
</div>

The intention here is to divide the screen up into two, and place one cube beside the other. We again use some of that magic we call CSS to achieve the goal.

.container {
  margin: 0 auto;
  width: 960px;
}

.left, .right {
  height: 100%;
  overflow: hidden;
  width: 50%;
}

.left {
  float: left;
}

.right {
  float: right;
}

Our example doesn't need to be full screen sized, so I've chosen to set it within a container column. Each of the two divs is set to 50% width and floated left and right respectively.

We now have two identical 3D objects. This isn't going be enough, we'll need to adjust for the different angles each eye needs. To do this we will override each stage perspective-origin property.

.left .stage {
  perspective-origin: 63.5% -340px;
}

.right .stage {
  perspective-origin: 36.5% -340px;
}

The left stage is given a perspective approximately two thirds along the X-axis, to mimic what your right eye would expect, and the right stage given a value of around one third. I've tweaked these by hand so they may need to be adjusted a little to work with your project.

The end result should be two almost identical 3D CSS scenes, with slightly different perspectives.

You can see the animated stereoscopic version here.

Star Wars

2015-12-10T00:00:00Z

Get out the popcorn! Today we're building the Star Wars movie title from the "The Force Awakens" trailer.

This is an excerpt from the course, CSS Animation 101. For a limited time you can pay what you want. Check it out!

This example combines CSS animation with some other CSS properties you may find helpful, specifically the transforms scale, translate and rotate.

Transforms

While it may sound like it creates an animation, the transform property is in fact used setting a static position, skew or scale of an element. We can use it to create great effects but to do so we need to have a different transform for each keyframe or state we animate.

Transform: scale(), translateZ() and rotateY()

We can make elements larger or smaller using scale. Using translateZ we can move elements in the Z-axis. This axis would be the one represented by drawing a line from you, through the monitor.

In this case we'll be using a combination of scale and translateZ to make it look like some words are flying through space.

Lastly we'll use rotateY to spin the letters of the tagline. Rotating around the Y-axis will require a bit of 3D work in the browser.

SVG, HTML and CSS

In preparation for this example I made two SVG files for the Star and Wars parts of the logo. Do feel free to grab them to use if you want to play along.

The HTML for the demo is as follows:

<div class="starwars-demo">
  <img src="/images/star.svg" alt="Star" class="star">
  <img src="/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

A static image of some stars is used for the background. The font in the byline was tricky to find, so I've referenced the web font "Lato" in this example.

With some absolute positioning to center the content in the middle of the screen, we begin with this:

Animating the Star and Wars

We want the larger text to fade into view, while also starting larger and getting smaller over time. This is a good case for the scale() transform. Let's use it on the word "Star" with these keyframes:

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

There are two properties that change over the course of this animation. The opacity and transform. The opacity change makes it start transparent, and fade away at the end so that we can loop the animation.

The transform begins by setting the scale at 1.5. This means that the initial size of the text is 150% larger than normal. At 89%, we set the transform property to a scale of 1. This means that between 0% and 89%, the scale goes from 150% to 100%.

The final transformZ causes the words to zoom away quickly.

We can apply these keyframes to the word "Star" like so:

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

The animation property here is specifying an animation called star, and a duration of ten seconds. It applies the built-in ease-out timing function, and tells it to repeat infinitely. We apply a similar rule for the word "Wars".

Making it 3D

Using 3D transforms in CSS, whether translating along the Z-axis, or rotating around the Y and Z axes requires that we set a stage for the 3D. In HTML terms this means we create a container, and tell the browser that some 3D stuff is going to happen.

We do this by adding the following to the .starwars-demo div:

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

These two properties tell the browser that the container's children should be positioned in 3D, rather than flat. CSS Tricks goes into more detail on the property.

Secondly, the persective property tells the browser how "deep" the scene needs to be. In case we've made it 800px. Smaller values create more "extreme" perspective effects as the scene is shorter.

With that covered, we'll introduce the tagline.

Awaken the Force

The tagline "The Force Awakens" appears in the trailer with each letter spinning into place. We can create this effect using the rotateY transform. In this case we've wrapped each of the letters in a span element, so that we can apply animation to each letter.

An issue I quickly discovered was that there isn't a straightforward way to animate each of the letters in the byline. My first approach was to manually wrap each letter in a span tag. This worked but made the HTML a little messy. The current demo includes some JavaScript (thanks to Tady for the assist) that wraps each letter automatically in a span.

We're going to apply an animation to each letter.

First, the keyframes:

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

To begin with, the letters are rotated 90 degrees, then by 70% through the animation, they've been animated to face the viewer.

We can apply this set of keyframes to each span like so:

.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}

The result is each of the span containers that hold each letter will fade and spin slowly into place, before fading away at the end of the animation.

Putting it together we have the finished demo.

This is an excerpt from the course, CSS Animation 101. For a limited time you can pay what you want. Check it out!

Why animate?

2016-01-01T00:00:00Z

Staring into the flickering flames of a fire, watching the waves of the sea lap against a shore, catching a sharp glimpse of a tiger about to pounce, the world is movement.

We are really good at noticing and reacting to movement. It's hardwired into our brains and is an important part of how we understand the world around us.

When we sit down to design a web site, we are creating something that will communicate with our visitors. Animation is one of the ways we can do this.

Communication

Often when designing web sites we think about the content, the layout, styles, fonts and colors. But we can also communicate through movement. Rather than consider animation something separate in the design process, the way things move is another facet in our designs that works and communicates alongside everything else.

All these things add up to create our brand and an experience we hope will be worthwhile.

We hope that our designs communicate our content effectively, communicate our great attention to detail, and leave the visitors happy. Since our visitors are great at noticing and understanding movement, animation is an important and powerful tool.

Humble beginnings

A simple example of animation we see everywhere is the hover effect. It seems strange to marvel at this simple concept now but when it was first introduced, it was quite a big deal.

Back when the web was first taking shape, we had documents connected through hyperlinks. These links, in order to communicate their difference from the text around them, were given a blue color and underlined. The cursor would also change to a pointer style.

When clicked they would change to purple to show that the link was active, or later that it had been visited. The colors were used as a way to communicate the status of the link. Things were pretty good.

Then along came CSS. In early 1998, the :hover selector arrived. Suddenly we could do so much more. Rather than rely on a sudden cursor change, we could apply styles to the link itself when the cursor hovered in front of it.

a:hover {
  color: red;
}

With this small change, we were communicating more. List of links became interactive playgrounds as we gleefully danced our cursors around, getting immediate feedback from the link colors.

It wasn't just for fun though. The change in color adds more information about what is happening on screen. We humans, being great at noticing movement or when things change, benefit when this extra information. But we can do more.

Conveying more information

Rather than stop at changing the color, we can add animation too. Animating a color change gives our eyes even more opportunity to notice the change, as it draws it out over a longer period of time. An animated change is easier to notice than a sudden change.

a {
  transition: color 0.2s;
}
a:hover {
  color: red;
}

With this we add a transition to the anchor CSS. When a link is hovered over, the browser will animate the color of the text from blue (or purple) to red over the course of 0.2 seconds.

Taking it further

It might not seem like much but even these simple tools open up a world of communication that we can use to add life to our designs.

With the ability to convey information through motion, we can draw attention to part of our pages that have changed, signal the arrival or removal of content, show our visitors what to look at next and much more.

Some ways animation can add value to a design:

Highlighting interactive content
Adding or removing content
Telling a story
Calling attention
Credibility
Branding and fun

Highlighting interactive content

Hovering links is one way animation can add value, but we can go further. Tooltips, changing design styles and other visual changes can make your pages feel more alive and prompt visitors to select, press or otherwise interact with your content. Draggable areas can expand or highlight on touch, black and white images can turn to color and more.

Adding or removing content

If content on a page suddenly vanishes or appears, we might notice. But that's all we know. We don't know where it went, and perhaps why. This is an opportunity to add a little animation.

Adding an extra line to a todo list, sliding in a control panel or minimising content to a corner of the page all benefit from animation. By showing where things come from and where they go to, our visitors maintain a connection with the page and better understand how it works.

Telling a story

We're not limited to text or even static images in our web pages. By moving elements around, adding new elements or removing them you can take your visitors on a journey and leave them better informed.

The homepage over at Mailchimp is a good example of this. In the center of the screen they've used several HTML elements and some CSS animations to explain how to build emails.

Whereas we might have created something like this with Flash not that long ago, we can now do so without relying on plugins and while keeping our sites fast, accessible and responsive.

Calling attention

We're great at noticing when things change visually. This trait is something we can use to call attention to specific areas. A common use for this could be when some content is updated on the page and we make it flash or change color.

We can take this further and have our sign up button shake a little when the page first loads as if to say "hey, I'm important", or we could have a suggested article fly in from the side of the screen when the visitor reaches the end of the previous one.

Done with care, animation is a very powerful way to draw attention to what we want people to notice.

Credibility

Something less often considered is the effect good animation can have on a visitor's confidence in our site. If you notice the interactions with your operating system, there's a lot of subtle animation. Things fade in or out, move to and from task bars and convey a polish that helps you understand the computer.

When we design websites we often forget this, and instead create an experience that feel flat. Animation can make your site's interactions feel better.

In a post on Medium.com, Michaël Villar explains how Stripe's checkout process uses animation to help the user both in their interaction with the checkout flow but also to instill confidence.

"The over-the-top polished feel of this animation adds to the overall user experience, by conveying a level of perfection and attention to detail that you can’t help but trust"

With the right style, animations can make the user feel like they're using a polished, modern UI.

Branding and fun

When Yahoo! went through a large rebranding in 2013, they added subtle animations to each of their website logos. Aiming to convey a feeling of fun, they were created both draw attention to the change and get people talking about it.

The site doesn't seem to have them any more, but you can find examples of the animations over on the Astronaut Love website.

When Stripe uses animation, they do so with a level of polish that people (and developers considering using their service) associate with their name. In both cases, the animation helps draw attention to and bolster their brand.

Animation can also be fun. On Hop.ie, I created a "bouncer" character that would bounce in from the left to act as a logo. While keeping the site's design very simple, this bouncer acts as an anchor that links back to the home page. It doesn't need animation, but I find adding a little lifts the tone. No harm in having a bit of fun.

Great power, great responsibility

Animation is a powerful tool. Much like how we find it easy to stare into the flickering of a burning fire, we find animation difficult to ignore. Some people even find it impossible to ignore.

When considering how you use animation in your designs, keep in mind that it's a communication tool. It should be used sparingly and never get in the way of the content or interactions.

It's unpleasant to try to listen to multiple people speaking at once, or to try to focus in a loud busy environment. Too much animation creates a visual noise that distracts and makes life harder for your visitors. With that in mind, always try to pare back the use of animation and keep it subtle.

Why animate now?

There's never been a better time to bring animation into your web design process. Browsers are getting better, devices are becoming more powerful, and we are getting better tools to help create animation.

Using animation takes judgement. If you want to be great at using animation to help your content stand out, improve conversions, or generally improve your brand, it's time to start.

New course & competition

2017-03-01T00:00:00Z

Today's a big day. We passed 5,000 Twitter followers (hi everyone!), and I have news for you about a new course I'm launching very soon.

I'd like to give you the opportunity to be one of the very first to enjoy the course, for just $1!

Practical and useful lessons

It's almost exactly 2 years since I launched CSS Animation 101 as an email-based intro to CSS animation. More than 2,000 of you have enjoyed the course and I've had loads of great feedback and suggestions.

Many people have been in touch to ask how they should apply these skills to real projects.

To answer this I'm creating a new course that will focus on the practical step-by-step work of creating an animated landing page. You'll learn how to apply your technical knowledge and get expert advice on what to do and what to avoid.

Trying something new

This time I'll be trying something new. I'd like you all to join me on the creative journey of building and recording the course. To do this, I'll be releasing each module one at a time.

The first module will be arriving at the end of March. After that, I'll be listening to your thoughts, and bringing out a new module every few weeks. Each module builds on the last and works toward creating a complete, working animated landing page.

Topics we'll be covering include:

Build an impressive animation header to show off your brand
Make designs feel alive with touch and hover animations
Trigger custom animations when scrolling
Use animation to grab attention
Build an animated content carousel
Putting together your own animation library using Sass
And more modules added over time (your feedback counts)!

Each module will come with downloadable code you can use right away on your projects. Once you enrol, you'll get lifetime access to all modules as well as any future modules I add.

As well as video lessons, downloadable code and cheatsheets - you'll also get access to the exclusive CSS Animation Rocks Slack channel. Share your work, questions and ideas and get help as you learn CSS Animation.

Sneak peak

Want an early glimpse of the course? You can see the Super-secret pre-launch course page now for more info. Sshhh! (I'm kidding, tell everyone!)

I'd buy that for a dollar

Shut up and take my money you say? Just a minute! How much would you want to pay for such a useful, professional course? $1000? $300? How about $1? 😲

This Friday I'll be selecting by random 20 lucky people to buy this course for just $1.

There are three ways you can win. Pick one, or you can maximise your chances by doing all three:

Make sure you're following on Twitter and give the course a mention

Like the Facebook page and shout it out on the Facebooks

Make sure you've signed up to the CSS Animation Weekly newsletter

Be quick! This competition closes on Friday, 3rd March at 12pm GMT. Winners will be contacted shortly after.

I'm looking forward to seeing how you all get on with this new course and excited to see the amazing animations you create.

Animating your hero header

2017-03-12T00:00:00Z

If you've ever arrived on a website and been greeted by a large image or video, and some titles on top, then you've encountered the "Hero Header". It's a popular way to introduce a website, and can be a great opportunity to help people quickly understand what it is your site does.

For many visitors it'll be their first impression of your brand, so you'll want to make the most of this moment to shine.

Here's what we'll be putting together.

See the Pen Landing page with animated foreground elements (staggered and cubic bezier and wedge).

Standing out from the rest

We can use animation to add polish to that first moment when the content appears, as well as use it to control the order in which information appears and draw the eye to what matters.

In this tutorial we'll animate in the content on top, and take the opportunity to experiment more with bouncy timing functions, animation choreography and creating reusable sets of keyframes.

Introducing the titles

Here's what we're starting with.

It's got a nice background image, some titles and a bit call-to-action button.

See the Pen Landing page with background image.

Making it bounce

Like in the choreography you see in stage performances and dances, we're going to think about how all the various pieces of content in our hero header move together. We could have the elements slide in to place like the background image, which would show a nice connectedness between the elements. Let's also take it a little further by making each of the elements seem to pop out of the screen.

To begin we'll create some keyframes for the animation. Within the keyframes container, we want "0%" and "100%" frames, representing the beginning and end states of the animation.

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

Initially the content will be invisible, so we're setting opacity to 0. We'll also use a transform to translate the position of the content up by 4em. Lastly we're adding a new transform. We're scaling the size down to 0.8 in the starting frame.

This means that when the animation starts the elements will be a little smaller, and by the end will have animated to their normal size. Let's see how we apply this to the content.

Moving the elements

We can now apply these keyframes to our content. However rather than adding an animation property to each element one at a time, let's take this opportunity to set up a reusable class for the animation. If we create a new class called animate-pop-in, we can then have this apply the animation more efficiently.

To get started, in the HTML, we add this class to each of the content items we want to animate.

... other HTML ...
<section class="header-content">
  <img class="rocky-dashed animate-pop-in" src="images/rocky-dashed.svg">
  <h1 class="header-title animate-pop-in">Your awesome landing page</h1>
  <h3 class="header-subtitle animate-pop-in">A useful start for your projects</h3>
  <p class="header-button animate-pop-in"><a href="#calls-to-action" class="button">Get started today</a></p>
</section>
... other HTML ...

We've added the animate-pop-in class to the image, headings and paragraph text. Now we can make use of that in our CSS. Here's what we add to our CSS.

.animate-pop-in {
  animation: pop-in .6s ease-out forwards;
}

This applies the animation pop-in to every element. It's making them appear with a duration of .6 seconds, and using the ease-out timing function.

Note: Hover and press "Rerun" to see the animation!

See the Pen Landing page with animated foreground elements (no bg movement + not staggered).

It's a start! But we can do better.

Choreography

Currently the content elements are popping in while the page is still blank. When we built our background animation, we made use of the animation-delay property. This meant the background waited for .5 seconds before the animation began.

Let's add some delays to our content items so that they show up after the background has started to appear.

Before we start adding delays, we set out which elements we're going to style.

.rocky-dashed {

.header-title {

.header-subtitle {

.header-button {

These 4 elements will need to appear, one at a time. Thankfully we don't need to put in the entire animation property for each, as these elements already have the animate-pop-in class. We'll just specify a delay on each one. Since the background animation takes about a second to get going, let's start these off with a delay of 1 second and increase it for each element.

.rocky-dashed {
  animation-delay: 1s;
}

.header-title {
  animation-delay: 1.2s;
}

.header-subtitle {
  animation-delay: 1.4s;
}

.header-button {
  animation-delay: 1.6s;
}

We also need to set these elements to be invisible on load, to avoid the flash where they're visible then they animate after a delay. Set the opacity on the "animate-pop-in" element.

.animate-pop-in {
  animation: pop-in .6s ease-out forwards;
  opacity: 0;
}

So let's see the result. We've added a delay that starts at 1 second, then each item waits a further .2 seconds before starting. When we look at the result we see the animations staggered.

See the Pen Landing page with animated foreground elements (no bg movement + staggered1).

It might just be my opinion but I reckon these seem to be appearing just a little bit late. Let's go back through and change the numbers so they start at .6s instead.

.rocky-dashed {
  animation-delay: .6s;
}

.header-title {
  animation-delay: .8s;
}

.header-subtitle {
  animation-delay: 1s;
}

.header-button {
  animation-delay: 1.1s;
}

On second thoughts, let's make that last item, the header-button appear a little more closely with just a .1 second gap. It should now all feel a bit tighter.

See the Pen Landing page with animated foreground elements (no bg movement + staggered2).

That's better. It's a good idea to take time to tweak things like animation delays and timing functions by eye. Sometimes an animation won't feel right and it might just be a question of messing around with the timings until it all works together.

So, now we have a staggered animation. It's looking pretty good, but the way the animation ends feels a little flat. Let's see if we can bring some life to this little animation with a more bouncy timing function.

Bounciness

Time to replace that old ease-out timing function with something more interesting. Over on Cubic-Bezier.com we'll create a curve that starts fast but then shoots right past the top and settles back to the finishing point. Place the first point on the left axis near the top to give it that fast start, then the second point above the top line. The resulting curve should be a long steep arc that tapers back at the end.

Taking the coordinates and putting them into our animation property now looks like this.

animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;

Let's see how that looks.

See the Pen Landing page with animated foreground elements (no bg movement+ staggered and cubic bezier).

It's starting to look a lot better now.

Pieces working together

The purpose of this choreography is to not only to look cool, but to draw attention to what we want our visitors to see. In this case it's straightforward, we want people to see the title and then have their attention drawn to the big "call to action" button in the middle.

There's a second goal here though, and that's to let people know that there's more content further down the page. We're going to help draw attention to that using a chevron at the bottom , but we can add a subtle animation to the header also. Let's try our hand at a rotate transform by animating that big white wedge at the bottom of the screen.

Animating the wedge

As before we'll create the keyframes for this new animation.

@keyframes rotate-up {
  100% {
    transform: rotateZ(-4deg);
  }
}

You'll notice there's no "0%" this time. That's because it's optional. You can choose to leave out either the starting or even the ending keyframe and the browser will infer it based on the styles given to the element. In this case, it'll go from having no transform, to being rotated. We apply this by making a couple of changes to our header:after block.

header:after {
  animation: rotate-up .5s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: #F9FCFF;
  content: "";
  height: 40rem;
  left: -5%;
  position: absolute;
    right: -5%;
    top: 90%;
  transform-origin: 0 0;
  z-index: 0;
}

First we add the animation property, giving it the animation name of rotate-up. I've decided to make the duration just .5 seconds this time. If it's longer, it'll still be moving when the other content is appearing and that could confuse the flow. We'd like this to be a subtle animation that doesn't distract from the main content. We'll have it delayed for .5s and use the same timing function as the background image.

Lastly we want this to begin without any transform, so we remove that line. It should now use the rotate-up keyframes to rotate from no transform, to -4 degrees.

As a last minute bonus, I've added some animation to the background image too. Really brings it all together! Check out the result.

See the Pen Landing page with animated foreground elements (staggered and cubic bezier and wedge).

Next steps

In this tutorial we have learned how to create and apply an animation to a class of elements, then use the animation-delay property to choreograph them. We'll be able to reuse this animate-pop-in class elsewhere without adding any extra CSS code to our project, essentially making it the beginning of our own animation library.

You may have noticed the lack of scroll cue, and an issue where the image might be half-loaded when the animation starts. Don't worry, you can find these and many more answers in the full course).

Take your skills to the next level

This is part of the new course, Level Up your CSS Animation Skills. Build the ultimate animated landing page. Enrol today and save 58%!

I want this!

Course update: Module 1 videos

2017-03-17T00:00:00Z

Level up your CSS animation skills just got better with all new videos for Module 1, "Build an animated hero header".

Enjoy professionally produced videos and learn how to bring your static web sites to life. This update brings you over 45 minutes of practical, step by step lessons - and it's just the start.

Here's a taste of what to expect:

Module #1 includes:

What is a hero header?
Why should we use CSS to animate it?
How to always create smooth animations
How to create sets of keyframes
Creating your own cubic-bezier timing functions
Controlling animations with "animation-play-state"
Reusing keyframes in multiple animations
and more!

Next steps

Enrol here and get the special pre-launch discount!

I'm working on some fantastic downloads and cheat sheets for the module, which will arrive soon. Be sure to follow on Twitter for more updates!

Build an awesome Hero Header

2017-03-20T00:00:00Z

When people arrive on your homepage you have mere seconds to impress them, explain what you're about and convince them to stick around. This is an important moment yet most sites miss the opportunity to impress and connect with their visitors.

Let's make sure your hero header stands head and shoulders above the rest.

What to include in your Hero Header

There are all sorts of ways you can tackle your hero header. You might want it to take over the entire page, maybe it needs to showcase new products, or explain in one short sentence what your brand does. There are some ingredients most hero headers share. These might include:

An eye catching headline
A call to action
Large striking background image or video
An embedded explainer video or animation
A carousel showcasing featured content
Company branding - logo or slogan
Branding and navigation
Animation

Let's go through each of these and see how each can be built into our hero header section.

The headline

We start with the headline. This is likely the first thing your visitors will read. It needs to be easy to understand while also conveying the right message. In this example, Mailchimp uses the space to explain that their service helps you "Send better email" and "Sell more stuff". This is short and easy to read but also lets me know just what it is Mailchimp does.

Getting the style right

When making your text easy to understand, it also needs to be clear. Again in the previous example the dark text is set against a plain white background. There's no way to miss that headline! A large, bold font helps too. In this example from Tito we see the text set against a background image. The image is faded a little to let the text stand out better.

If you're using background images it's usually a good idea to go for large white text as it tends to be easier to read than dark text. Here are some handy tips on helping your text stand out on an image.

The call to action

Once you've established your initial message through the big, eye catching headline the next step is to guide your visitor into the action you want them to carry out. This might be clicking a "sign up" button, encouraging them to see your products or projects, or leave their email with you. This usually takes the form of a button or a form (with a button) and is called the "call to action".

When designing your call to action you need to make sure it stands out visually. This could mean using a brand colour as the background, making it large or placing it in a prominent position on the screen. Front and center just under the headline is a popular choice, but it doesn't have to be. A good highlight colour can make a call to action stand out even when it's up in the top right corner, like on this example from Each&Other.

Once you have it in place, the next thing to consider is your choice of words. Think in terms of actions. What would you like your customer to do? Phrases such as "Get started", "Download now" or "Sign up" are all very action oriented and help your visitor understand what the button means. Try to avoid terms like "Submit" or "Go". A vague phrase here can slow people down, and what you really want is for your happy visitor to confidently press the button.

The background image

We have a strong message and an action. You might want to consider the wider page next. Many hero headers make use of large background images. These can really bring life to your design and help people connect with the message or feeling behind the design.

There are lots of great places to buy royalty-free images. A Google search will turn up loads. When I'm getting started on a design I'll often turn to Unsplash as they provide a load of great, free images that I can quickly try in designs and see what sort of images work best.

Dimensions and file size

When you've found your ideal image, you need to prepare it for your hero header. You want the image to be big enough to cover the screen, but not so massive it takes a long time to download. Photos tend to scale up on very large screens quite well so I would usually scale a photo down to about 1400 to 1600px wide. This should look good on most screens.

Photos should be saved as JPEG files and compressed. Depending on the type of photo you could expect the finished file size to be about 200 to 500KB. Larger sizes will become slow and noticeably delay your site's loading times. You really want your hero header to appear quickly, so making sure the images you use are compressed is important. I use Tinypng as a last step in compressing my images.

Don't worry about the name, it'll work on .jpg files too!

Filling the entire viewport

Screens can be all sorts of sizes. Often we want our hero header to fit itself to the screen but it's hard to know whether people will have a wide short browser window, or a narrow tall window. We can use two tricks to get our hero header to fill the available space. Setting the background size to cover and the height of the hero header to 100vh.

.hero-header-container {

background: url(/images/awesomephotodude.jpg) no-repeat center;
background-size: cover;
height: 100vh;
position: relative; /* Useful for any "absolute" positioned elements inside */

}

Setting the background image size to cover tells the browser to scale and crop the image in such a way that it fills the available space. Keep in mind this means it could crop the sides off on a tall screen, or lose the top and bottom on a wide screen. Experiment to see which works best for you. (Hint: using media queries to show different images at different widths and heights could be an idea here.)

The "vh" stands for "viewport height" and is a percentage. In this way 100vh means the entire viewport height.

Adding a gradient on top

We have our lovely background image but now we find it's hard to see our headline! This happens a lot. There are a couple of ways we can fix this. One way might be to blur or darken the original photo. Like in the Tito example above, applying a filter to tone the image back really helps the headline stand out.

Another approach might be to use the power of CSS. We can make use of CSS to apply a background gradient on top of our hero header's photo. One way to do this might be to use a pseudo-element:

.hero-header-container:before {
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.8));
  content: "";
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Here we add a before pseudo-element that sits behind our content but in front of the background image. In this case it's a gradient from grey to darker grey. You could substitute a solid colour or a different gradient, or even a background image. Alternately you could add a background colour or image to your heading.

The main idea is to make sure your foreground text stands out against the photo, like in this example from Bulmers.ie.

Background video

Sometimes having a big image isn't enough, and you need something more. A popular option is to embed a video in the background of the page and have it play automatically on load. In this example from Storyful we have a full-screen background image showing the way the company works.

Videos can look great but you need to make sure they're optimised for the web. This means keeping them short, usually 10 to 20 seconds at most. They should be scaled down to a relatively low resolution and compressed so that the file size is close to 10MB or so.

Videos can be hosted on your own server but it's usually better to use a service such as Embed.ly to take care of the hassle.

If you're looking for great free videos to get started, I've found Coverr a great starting point. It's like Unsplash but for video.

You can even mix in a bit of a background image with transparency to act as a mask in front of the video, as seen on this lovely site from Adapt.

Explainer video

Setting the scene on your hero header with a background image or video might not be enough. We can still use video though, but put it front and center to tell the story of our brand. In this example from the (now dead, sadly) HomeHero site we see a big video that automatically plays on load.

We can embed videos like this from Youtube (or Vimeo if you prefer). If using Youtube, the simplest way is to use their iframe embed option. You can add some custom settings to make it look tidier. Here's an example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0jhDAVkdsAI?modestbranding=1&cc_load_policy=0&iv_load_policy=3&vq=hd720&rel=0" frameborder="0" allowfullscreen></iframe>

In this I've set the modestbranding to "1", the vq to "hd720" and rel to "0". Modest branding means the Youtube logo is more subtle, the vq setting tells it to use a higher quality than the default, and the rel tells it to not show related videos after the video finishes. There are loads more options in Youtube's docs.

Carousels

This can sometimes be a tricky one. In the earlier days of the web we had this idea that there was a "fold" (a newspaper term) at the bottom of the screen beyond which all content and hope was lost. This is not necessarily true but the idea persists. Before considering whether a carousel is the right idea, read up on how to do it right. You might not need a carousel at all.

Still, rules are made to be broken. Apple.com uses a carousel on their home page. They do so in a way that uses a small number of different screens, which change slowly. Their hero carousel also stops animating once you interact with it and has navigation at the bottom.

A carousel can be useful for your hero header but be cautious. You don't want to confuse your visitors with too many messages.

With an eye catching headline, a clear and intruitive call to action, beautiful images and video, your hero header is looking pretty good. Don't forget your branding and navigation!

As we can see in the examples pictured above, it's common to place your logo in the top left and the menu on the top right. This is a convention and helps visitors know where to look for this information. Sometimes your call to action might be placed alongside the menu. If you do, it can be helpful to highlight it as a button to help it stand out as the most important action.

Make sure the logo and navigation links are easy to read. If using a large background image you might want to place a bar along the top to help the logo and links stand out.

Thinking beyond the "fold"

While it can be impressive to take over the screen with your hero header, it's also ok to let people know there's more to see below. People are pretty good at scrolling on the web and on mobile it's even easier than clicking. You can make use of this by having the content that follows your header be visible, encouraging people to scroll.

Still, studies do show that the information that people see first is more important than the rest of the page.

"What is visible on the page without requiring any action is what encourages us to scroll."

In short, make the most of what's visible when the page first appears, but also keep in mind that people do scroll. Even if they find that content less important.

Break the rules!

The approaches laid out here are hopefully useful but don't be afraid to try your own approach. A nice example is the landing page from BaseCamp. At first glimpse it seems a little chaotic. Their logo is in the middle. Their menu is split up on both sides and they have three headlines.

Still the header works in my opinion. It clearly shows the problem being solved, it has a highlighted call to action on the top right and the layout encourages people to scroll.

Animation

With an awesome hero header in place, something is missing. It's just loads and appears suddenly. The next step is to add in animation! Next we'll make your hero header animated.

🎉 Module 2 is live! 🎉

2017-04-17T00:00:00Z

You can level up your interaction animations today. Check out what you get!

Touch and hover animations
Animating links
Animating tooltips
Revealing content on hover
Animating buttons
Examples to download

But wait, there's more!

Get the course for just $1

This Friday 10 lucky people will be selected to buy this course for just $1.

There are three ways you can win. Pick one, or you can maximise your chances by doing all three:

Make sure you're following on Twitter and give the course a mention

Like the Facebook page and shout it out on the Facebooks

Make sure you've signed up to the CSS Animation Weekly newsletter

Be quick! This competition closes on Friday, 21st April at 12pm GMT.

Price going up soon

This Friday the price for the course will go up. You can get the course for just $100 right now, but on Friday it'll go up to $140. [Sign up now]((http://courses.cssanimation.rocks/p/level-up) and get lifetime access to all current and future content, as well as help and support in our exclusive Slack channel!

Transitions in space

2017-04-21T00:00:00Z

A few simple transitions can make a huge difference. In this article we'll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great.

Transitions vs animations

Transitions are a great way to smooth the changes from one state to another (and back again) in the browser. They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways.

For example, a transition isn't much use if you want an animation to play on load, or if you want it to loop infinitely. But if you have two states and you want to be able to easily animate back and forth between the two, a transition's the best choice.

I've written more about the differences between transitions vs animations.

In this example we're going to build up a space scene and introduce a hover effect to reveal some more information about the planet. We'll see how to think about setting the default and hover states, and what sorts of properties are best used to ensure smooth, jank-free animation.

You can find the full demo here.

Setting the states

When creating transitions most of the time and effort needs to go into the before and after states. We need to think about how it's going to look before the transition and then how it needs to look once the transition has finished.

When I'm building more complex transitions I tend to not worry too much about the movement between these states until I'm happy that both states look right. Having said that it's important to think about the properties we use to create the hover state, as these properties are going to be animated.

Before we get into that though let's set up the starting and hover states.

Starting state

We begin with out planets places in the middle of the screen. The moon happily rotates around the earth.

The HTML contains an article within which we have our earth and moon elements. I've also wrapped the moon in a moon-container div as this will help when repositioning it later for the hover effect.

<article class="earth-demo">
  <div class="earth">
    <img src="https://cssanimation.rocks/images/random/earth.png">
  </div>
  <div class="moon-container">
    <div class="moon">
      <img src="https://cssanimation.rocks/images/random/moon.png">
    </div>
  </div>
</article>

Here's the CSS we use. For the earth element we position it absolutely, and use a calc trick to position it in the middle both horizontally and vertically.

.earth {
  position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

The image is also positioned and given a height and width.

.earth img {
  height: 200px;
  position: absolute;
    top: 0;
    left: 0;
  width: 200px;
}

For the moon we do something similar. Beginning by placing the container in the middle of the screen.

.moon-container {
  position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
}

We set up the dimensions for the moon and give it an animation using the spin keyframes. This will set it spinning around the Earth.

.moon {
  animation: spin 20s linear infinite;
  background: none;
  height: 50px;
  pointer-events: none;
  transform-origin: 25px;
  width: 50px;
}

At this point through, the moon is actually positioned in the middle of the screen, right on top of the earth. Let's use a transform to push the moon outside it's container and outside the planet.

.moon img {
  height: 50px;
  transform: translateX(-160px) translateY(-160px);
  width: 50px;
}

This means that when the moon div rotates on top of the planet Earth, the actual image will be rotating further out. Next we give the images a border radius to tidy up any antialiasing issues and a box-shadow to give them a blue glow.

.earth img, .moon img {
  border-radius: 50%;
  box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
}

Lastly, we want the moon to spin, so we create some keyframes. This is a simple one, we just want the animation to rotate around the Z-axis by 360 degrees.

@keyframes spin {
  to {
    transform: rotateZ(360deg);
  }
}

Here's what we have so far.

See the Pen Planet hover effect part 1: initial stage by Donovan Hutchinson (@donovanh) on CodePen.

Showing more info

We'd like to show some useful information about the planet Earth on hover. Perhaps useful for alien visitors to get some insight into our home before they visit.

Before we set up the hover state we need to add this extra info.

We begin by expanding the HTML to add in a more-info block containing some text.

<article class="earth-demo">
  <div class="earth">
    <div class="more-info">
      <h1>Earth</h1>
      <ul>
        <li>Third planet from the Sun</li>
        <li>Atmosphere: 21% oxygen</li>
        <li>Liquid water on surface</li>
        <li>Only planet that has life (that we know of)</li>
      </ul>
    </div>
    <img src="https://cssanimation.rocks/images/random/earth.png">
  </div>
  <div class="moon-container">
    <div class="moon">
      <img src="https://cssanimation.rocks/images/random/moon.png">
    </div>
  </div>
</article>

This is added within the earth container as I'd like it to be part of the hover effect, so that when the cursor hovers the text it'll stay on the screen.

In our CSS we add some styles for this more-info block.

.earth .more-info {
  background-image: linear-gradient(to bottom, rgba(10,10,10,1), black);
  border-radius: 1em;
  color: #fff;
  opacity: 0;
  padding: 1em;
  transform-origin: 0 0;
  transform: scale(.8);
  width: 400px;
}

.earth .more-info h1 {
  margin: 0 0 1em;
  text-align: right;
}

Here we're setting the background colour and border radius, text colour as well as padding and width. We're also scaling it a little using the scale transform and we set the transform-origin to the top-left corner so that it will scale from that direction.

The opacity for this more-info block is set to zero so that it's invisible. We could go further and add in visibility to make sure the content doesn't interfere with other content but for this demo it's fine.

Transitioning the right properties

When setting up the hover transition animation it's important to think about performance. Properties such as height, padding, font-size or background-position can all be animated but they don't tend to perform well. The reason being that they cause the browser to recalculate all sorts of other details in the layout when they change.

It's a good idea to stick to the opacity and transform properties when animating as these do tend to perform well and don't cause any "jankiness".

In this example we're using the transform and opacity properties. The more-info block is scaled down a little with a transform and has opacity of 0. In our hover state we can

How we make use of the transform and opacity properties specifically. Let's set up the hover state to set the more-info block to be visible, while getting the planet itself out of the way.

Hover effect

Let's start setting up each of the .earth:hover states. If you're using Sass you can write this a little more succinctly but for now I'm using vanilla CSS.

Firstly let's more the planet out of the way.

.earth:hover img {

transform: translateX(-75px) translateY(-75px) scale(.5);

}

This transform pushes the planet up and left by 75 pixels while scaling it down to 50% in size. Powerful!

Next we do a similar thing to the moon.

.earth:hover ~ .moon-container {

transform: translateX(-75px) translateY(-75px) scale(.5);

}

.earth:hover ~ .moon-container img {

transform: translateX(-140px) translateY(-140px);

}

There's a second tweak here to the moon's image. I'm adjusting its transform to bring it a little closer to the earth. Next we show the more-info block.

.earth:hover .more-info {

opacity: 1;
transform: none;

}

This sets the opacity to 1, making it visible and we set the transform to none so that the block scales up to the normal size.

Here's the result. Hover over the planet to see the content.

See the Pen Planet hover effect part 2: basic hover effect by Donovan Hutchinson (@donovanh) on CodePen.

Applying transitions

Now that the hard work is done, all we need to do now is tell the browser how to transform between these states. Thankfully there's not too much involved. Most of the transitions can be handled with one CSS rule.

.earth-demo * {
  transition: all 4s cubic-bezier(0,1.5,.3,1);
}

Let's break this down. Firstly this rule uses the asterisk "*" to make it apply to all elements within the earth-demo article.

It then applies a transition to all properties, lasting 4 seconds and using a cubic-bezier timing function. This function is a kind of exponential ease-out, meaning that it starts off very fast and slows down toward the end. It also overshoots a little and settles back.

Before we call it a day, let's just add a little nuance to the list of text. It would be nice to call attention to the list elements by having them animate into place one at a time. Thankfully we can do that with the transition-delay property.

Transition delays

We first want to set the opacity for these items to zero so that they are invisible before the transition starts.

.earth-demo h1, li {
  opacity: 0;
}

Then when the hover happens, we show them.

.earth-demo:hover h1, li {
  opacity: 0;
}

Next we want to delay each of the 4 list items. We can do that using the nth-child selector.

.earth-demo:hover li:nth-child(1) {
  transition-delay: 0s;
}

.earth-demo:hover li:nth-child(2) {
  transition-delay: 0.2s;
}

.earth-demo:hover li:nth-child(3) {
  transition-delay: 0.4s;
}

.earth-demo:hover li:nth-child(4) {
  transition-delay: 0.6s;
}

This will add a delay to each of the list items. Since we're using the "*" selector above, each of these list items has a transition and we only need to specify a delay.

Here's the finished result.

See the Pen Planet hover effect part 3: with transition by Donovan Hutchinson (@donovanh) on CodePen.

So there we have it! A seemingly complicated animation, I mean transition carried out with just one CSS rule.

In this article we've learned how to approach planning and building the states for an impressive transition, and made sure our animation is smooth and looks great.

Next steps

There's loads we can do to bring our websites to life using animation and this is just one small part. If you'd like to become an expert in applying movement to your UI and web projects, don't miss your chance to Level up your CSS animation skills today!

🎉 Module 3 is live! 🎉

2017-05-21T00:00:00Z

Hello there! This is a quick update to let you know that I've added another 44 minutes of videos to the course Level up your CSS animation skills. Module 3 is officially live! You can check it out right now.

This is a great module. We'll be putting on our JavaScript hats and creating a function that attaches a class to visible elements on the screen. We can use this to animate, show or hide elements as visitors scroll our pages. Along the way we'll animate an article about making pizza, and even fly to the moon. (If you spot the theme, tweet @cssanimation to let me know!)

What's that? Examples you say!?

Sure - check out what we're building in this module. Firstly we're animating elements on scroll on this article.

We're also bringing parallax to this flight to the moon. 🚀

Topics include:

Scroll animations... (1m 50s)
Animating content on scroll (14m 52s)
Animating a slide-in banner (6m 17s)
Parallax scrolling (10m 57s)
Mouse-leave animation (10m 40s)

I'm working on a final part containing examples to download and use on your projects. Stay tuned for another update when the examples are done!

Enjoy! I hope you find this module helpful. It was a load of fun to create!

While you're here...

I wanted to ask. Do you know anyone who might enjoy learning about CSS animation? If so, please let them know about the course! If you like, you can give them a 20% discount with the code "friend". We're all friends here after all!

Here's a link with the 20% discount included! Spread the word.

Have a lovely week!

Happy birthday to the newsletter 🎁

2017-07-23T00:00:00Z

I can't believe it's been a year since I launched CSS Animation Weekly, a regular digest of hand-picked CSS animation inspiration and tutorials. In that time we've seen almost 500 examples of amazing animation work, tutorials and articles.

To celebrate issue #52 of the email, I'm giving away 10 places on my new CSS animation course with a massive $140 each. Want to win a place? It's easy!

To win yourself a place on this course, all you need to do is retweet this tweet:

Stickers! 🎁 Enrol now and get a free limited-edition CSS Animation sticker - AND save 20% 🙌 https://t.co/PvVarod59o pic.twitter.com/6tZK0370dJ
— CSS Animation (@cssanimation) July 23, 2017

You can just press that retweet button there ^

10 lucky winners will be picked this Friday, July 28th! Best of luck! ☘️

By the way, if you can't wait till then, you can take advantage of a massive 20% discount today.

Thank you to everyone who has subscribed and supported CSS Animation Weekly. 💌

Create an animated scroll cue

2019-04-28T00:00:00Z

In this tutorial we're going to add a subtle cue to the bottom of the page that lets people know that they can scroll to see more content. We'll use animation to make it easier to notice and even creating a nice "heartbeat" animation along the way.

In our previous lessons we've animated the background, and used staggered animations to introduce the titles. The page is beginning to look pretty animated, but it leaves just one last piece, the scroll cue.

Whether we need an arrow to tell people to scroll is a topic for debate. Some would suggest that it's no better than a sticky plaster, and that a better idea would be to design the layout of the page in such a way that scrolling is more obvious. Let's leave the discussion aside for the moment, and instead we'll use this as an opportunity to see how multiple CSS animations can be combined in one little detail.

To code along with this lesson, grab the sample code zip file and look for folder 02-introduce-titles. A completed version of this lesson's code is in the folder 03-scroll-cue.

```html

This post is part of my amazing 4-hour video course on CSS animation. I'm currently offering a massive 93% discount for CSS animation fans. Reserve your place today!

```

Adding the HTML and CSS

To get started, we add some extra HTML to our page. I've include a chevron image in the images folder. Add the following HTML to the header section of the HTML, outside the header-content section.

<section class="header-down-arrow">
  <img src="images/downarrow.png" width="50">
</section>

We'll use this to position the image. Next, in our CSS, set up styles for the chevron's container.

.header-down-arrow {
  position: absolute;
    bottom: 4vh;
    left: 0;
    right: 0;
  text-align: center;
  z-index: 10;
}

We're positioning this absolutely and using text-align: center to place the image inside it in the horizontal center of the screen. It's positioned 4% of the screen's height away from the bottom, so should be visible on all screens, whether they be desktop or mobile. I've also made sure to set the z-index here to a value higher than 1 as the header content also covers the entire screen and we want to make sure this chevron is on top and visible.

Looking at the result we see a nicely positioned down arrow at the bottom of the screen.

See the Pen Landing page with scroll cue / chevron (no animation).

Animation 1: Introduce the chevron

We begin with the keyframes. Since we're trying to convey the idea that people can scroll the page, we can hint at that with the animation on this scroll cue. If the chevron slides up as it appears, it will suggest that direction of movement. We'll create some keyframes called "fade-slide-up".

@keyframes fade-slide-up {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

This animation is very similar to the fade-slide-down animation we made in lesson 1. The only difference is the starting transform, where we're setting it to start 4rem down instead of up.

If this rings alarm bells, don't worry, we're going to do some optimising in the next lesson and see if we can trim some of this back a bit. For now though we'll create new keyframes for this animation.

We then apply this to our chevron image.

.header-down-arrow img {
  animation: fade-slide-up 1s 1s ease-out forwards;
  opacity: 0;
}

Here we have the animation name, a duration of 1 second, a delay of 1 second and a basic ease-out timing function. We also set the opacity to 0 so that there's no flash at the start before the animation begins.

Here is in in action.

See the Pen Landing page with scroll cue / chevron (slide up animation).

If you look carefully you might notice that the chevron animates into place last. It finishes just after the last of the content has stopped moving. The idea is that visitors will subconsciously notice this and be more likely to notice that there's a scroll cue. This is a subtle detail and perhaps easily missed, so we can go further and add a second animation to this chevron. Let's make it pulse.

Heartbeat

So far all the keyframes we've built have only had start (0%) and end (100%) states. Let's build an animation with 3 states.

@keyframes pulse {
  0% {
    opacity: 1;
    transform: none;
  }
  50% {
    opacity: .8;
    transform: scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

In this we've added in a middle state, 50%. The animation begins with the chevron at full size, then scales it down at the halfway point, before scaling back up again. It also fades a little when it's "further away" from the viewer. This should be useful to create a subtle beating effect.

We apply this to our image by adding a second animation to the animation property.

.header-down-arrow img {
  animation: fade-slide-up 1s 1s ease-out forwards,
             pulse 2s 3s ease-out infinite;
  opacity: 0;
}

Multiple animations, like multiple backgrounds, are added by using commas. Each will stack and should work in parallel. You should be careful through when more than one of the keyframes operates on the same property, such as transform, it can cause problems. I'm using a delay here of 3 seconds for the "pulse" animation to make sure it doesn't start while the "fade-slide-up" is animating.

In this case the "pulse" animation has a duration of 2 seconds, a delay of 3 seconds, the old ease-out timing and lastly an animation-iteration-count of infinite. Since we're telling this animation to play forever, we don't need to specify the fill-mode.

We can see it in action here.

See the Pen Landing page with scroll cue / chevron (slide up and pulse animation).

A note about Safari

While the above works well in most browsers, it runs into trouble with Safari. Hopefully this is something that will be fixed in future but for now we can fix it by splitting these two animations up and applying one of them to the container.

First we remove the "pulse" animation from the .header-down-arrow img block and move it to the .header-down-arrow.

.header-down-arrow {
  animation: pulse 2s 3s ease-out infinite;
  position: absolute;
    bottom: 4vh;
    left: 0;
    right: 0;
  text-align: center;
  z-index: 10;
}

The animation will wait 3 seconds before starting, and there's no longer any conflict with the "fade-slide-up" keyframes. Phew!

See the Pen Landing page with scroll cue / chevron (slide up and pulse animation - fix for Safari).

Subtle is best

It's easy to go crazy and make all the things animate, but that's rarely a good thing for your visitors. People want to be able to read and use the site without being bombarded with movement, so do go easy on the infinite animations. In this case it's quite a subtle animation. Experiment with what works for you, but do dial it back to the point where the animation helps your visitors rather than gets in the way.

Want to learn more?

This was part of my amazing 4-hour video course on CSS animation. As a fan of this site you can save a massive 93% on the course today.

Save 93% and Level Up Your CSS Animation Skills today!

Animating Links

2019-05-05T00:00:00Z

The humble text link, or anchor, is a mainstay of the World Wide Web. For a long time links were always blue and underlined, until CSS came along and gave us the tools to change the colour and style and even animate our link hover effects.

In this tutorial we will learn how we style and animate the underlines on our links, we will combine multiple transitions, group animation keyframes together, and investigate some of the upsides and downsides of using animations instead of transitions.

You'll need some files to follow this tutorial. Download this zip file, and open folder 00-start in the 02 folder. A completed version of this lesson's code is in the folder 01-anchors.

You'll notice there are loads more examples there too - you'll find all the lessons on this course if you'd like to learn more.

Starting HTML and CSS

To begin we have some simple HTML. Inside the containing content article you'll find a paragraph of text with a link. Nothing too fancy here.

<article class="content">
  <p>... and here is some text. This text shows how <a href="https://cssanimation.rocks/">CSS animation</a> can help us make links be more fun and useful...</p>
</article>

We're going to style this link using CSS, so let's open the stylesheet links.css. It's empty for now.

Testing in the browser we see a simple paragraph with a "normal" looking link, complete with the default blue colour and text underline.

See the Pen See the example on CodePen.

Replacing the underline

Let's start by replacing, and then animating the underline on the text. Many sites choose to remove the underline from links and rely on colour or font-weight to help links stand out. This is fine, but worth keeping in mind that some visitors might be colour-blind or have trouble making out subtle differences, so do test carefully.

Accessibility

Just to note. While I'm using ":hover" in these examples, do keep in mind that you can also make use of the ":focus" state here too for keyboard navigation. For the purposes of these examples I am trying to keep things as simple as possible, but it's important to keep in mind other ways that people will be accessing our sites and applications.

Also, we're setting link colours here. So you'll want to think about what style you want to apply to "visited" links. It can be useful to know which links on a page your visitors have visited before!

OK back to the CSS. In our links.css stylesheet file, set the anchor styling to text-decoration: none, and the same on hover.

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

With the underline gone, we can now put it back! Only this time we'll create our own that we can animate.

One possible approach could be to add a border-bottom to the links. We'll see how it looks.

a {
  border-bottom: .1em solid blue;
  text-decoration: none;
}

In the browser we can see the result. It's not great, the border sits very low, far away from the text.

See the Pen See the example on CodePen.

Let's try another approach, using a pseudo-element.

Pseudo-elements : vs ::

Back when Internet Explorer 8 was a popular browser, we used to write pseudo-elements using a single colon ":" like ":after". However the standard nowadays is to use two colons like so "::". You may have noticed in the last module I used the older approach. This should be fine for now but for future compatibility it's a better idea to use two. A big thank you to one of my students for pointing this out! I'll be using two colons in the pseudo-elements from now on.

Back to our CSS.

a {
  position: relative;
  text-decoration: none;
}

a::after {
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 0;
    bottom: .14em;
    left: 0;
}

Here we add an after pseudo-element, using "::after". We set a border on the top first. Then we give it the empty "content" property it needs, and position it absolutely. To make this work we need to also go back and set the position to "relative" on the anchor element. This tells the browser to use the anchor as a container for the absolutely positioned element within it.

We're setting the right and the left to "0" so that the line goes all the way across the link. Lastly the "bottom" is set to be slightly higher than the bottom of the container, in this case ".14em" from the bottom. In the browser we can see that this now positions nicely.

See the Pen See the example on CodePen.

Styling the underline

Since we've created our own pseudo-underline we can apply styles. Like border-radius for example. We could add in a border radius and create an oval shaped underline using border-radius: 50%.

a::after {
  border-radius: 50%;
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 0;
    bottom: .14em;
    left: 0;
}

We could even change the border style to dotted or dashed for some crazy styles, or even apply an SVG or image as the underline. Do experiment and see what works for you.

For this example though we'll keep it simple so that we can focus on the animation. I'll just add a small border radius to make the border better match the style of this rounded font.

a::after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 0;
    bottom: .14em;
    left: 0;
}

Time to add some animation.

Animating the underline (transitions)

To see what sorts of things we can do with this we'll try both a transition and an animation to see how each works. First we'll try a transition.

We can adjust the style of the after pseudo-element on hover. To do so add a new block called a:hover::after

a:hover::after {

This contains the hover style for the pseudo-element. Let's adjust the positioning so that the line goes from left to right on hover. First we change the right property on the pseudo-element to "100%". Then add a hover position where the line goes all the way across, by setting right to 0.

a::after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
}

a:hover::after {
  right: 0;
}

Testing this in the browser, it doesn't look like much yet.

See the Pen See the example on CodePen.

We'll need to add a transition to see this change from left to right.

In the pseudo-element, add a transition that will transition the "right" property over a duration of .4s and using the cubic-bezier timing function with coordinates "0,.5,0,1". This timing function starts very fast and tapers off, like an exponential ease-out.

a::after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
  transition: right .4s cubic-bezier(0,.5,0,1);
}

We now see the underline animate from left to right on hover.

See the Pen See the example on CodePen.

It's worth noting that we're animating the right property here. This is potentially a source of problems as it's not as optimised as if we'd animated the transform or opacity, but in this case it'll be ok as this transition doesn't move the element or cause any page reflowing.

Before we finish up with the transition effect on the underline, let's add in some colour animation.

a {
  color: #2F56B0;
  position: relative;
  text-decoration: none;
  transition: color .4s ease-out;
}

Back in the original anchor style block, we set the colour to match the border. We also want this colour to animate on hover, so we add a transition property to act only on the "color" property, with a duration of .4s and a simple "ease-out" timing function.

Next we need to add another colour for the hover states of both the anchor and the pseudo-element.

a:hover {
  color: #457DFB;
  text-decoration: none;
}

a:hover::after {
  border-color: #457DFB;
  right: 0;
}

The anchor has the new colour set, and then the same colour is applied to the border-color on the pseudo-element. Lastly we need to add another transition to the pseudo-element to make this colour animation work.

a::after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
  transition: right .4s cubic-bezier(0,.5,0,1),
              border-color .4s ease-out;
}

In the transition we add a comma, then a second transition specific to the border-color property. This will match the timing and duration of the anchor's color transition.

See the Pen See the example on CodePen.

How we use transitions

In this example we've seen how transitions smooth the state change between an element's default state and its hover state. We've also seen how the transitions can be applied to multiple properties.

The way we went about building the transition is worth looking at. We built each state, and then at the end added a transition to create the animation between the states. This is very different to how we design animations using keyframes. Rather than build the animation entirely within the keyframes, we plan out each state in advance and the transition property does the job of smoothing the changes between states.

We can specify transitions properties when we set up the transitions - so for example the colour property changes using a different timing function to the other properties. We can use this to create more nuanced animations.

Before we finish up though let's see how we can use an animation with keyframes to add animation to the hover event.

Animating the underline (keyframes)

Where the transition property smoothes the changes between two states, we can use animations to introduce more than two states, to play automatically on load, and to repeat. These are features transitions don't give us, so it might be useful to make use of animations on hover states in some cases.

For this example we'll set up the animation to repeat infinitely as long as the mouse is hovering over the link.

@keyframes anchor-underline {
  0%, 10% {
    left: 0;
    right: 100%;
  }
  40%, 60% {
    left: 0;
    right: 0;
  }
  90%, 100% {
    left: 100%;
    right: 0;
  }
}

We set up the keyframes with the name "anchor-underline". In this we have three sets of pairs of keyframes. First 0% and 10%, then 40% and 60%, and lastly 90% and 100%. This is a little different from the way we've written keyframes so far, so it's worth explaining. When we want keyframes to have the same properties, we can list them together separated by commas. What this says is that the 0% and 10% states will be the same as each other, as well as the 40 and 60, and the 90 and 100.

In effect this means that the animation doesn't change between 0% and 10%. However it then will animate between 10% and 40%, at which point it will remain unchanged until 60%, and so on.

We add styles initially for the left and right positions. At first these styles make the line invisible, but pressed up against the left side. In the middle we set the left and right to 0, meaning the line is stretched across the entire link. Lastly we push the left up to 100% to squash the line against the right side.

We then change our :hover::after block, removing the right property and replacing it with the animation property.

a:hover::after {
  animation: anchor-underline 2s cubic-bezier(0,.5,0,1) infinite;
  border-color: #457DFB;
}

We specify the animation name, a duration of 2 seconds, the same timing function as earlier and lastly we give it an iteration count of "infinite". This means it will run forever, as long as the link is hovered over. Let's see this in action.

See the Pen See the example on CodePen.

For as long as we hold the hover state, the animation plays.

Transition vs animation

This is one advantage the animation property has over transition. We can have animations that repeat, or alternate, or go through multiple stages. Transitions are more limited in this sense in that they only afford us the animation between one state and another. Having said that, there's a significant advantage to the transition approach, in that the hover effect gets a second, "out" transition for free. By applying the transition property to the anchor styles, the browser transitions both to and from the hover state, even if the mouse leaves halfway through the animation.

As we can see, this gives us a smoother mouse out effect.

When choosing whether to use animation or transition for interactions it good to keep in mind this benefit. For the rest of this module we'll be focusing on how we can make the most of the transitions to provide smooth animated responses to interactions.

Multiple lines

The above works well for links in a single line, but it can break when we make the text wrap multiple lines.

This blog post sets out a good approach - using background-image instead of the border on the link element. So if you're looking at animating links on multiple lines, you can set it up like so:

a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 4px;
  transition: background-size cubic-bezier(0,.5,0,1) 0.3s;
}

a:hover,
a:focus {
  text-decoration: none;
  background-size: 100% 4px;
}

Here it is in action:

See the Pen See the example on CodePen.

What we learned

In this lesson we learned how to create custom underline effects on our links, we combined multiple transitions and also applied them to different properties. We then looked at how the animation property differs in how it could be used for hover animations and created keyframe animations with grouped keyframes.

Want to learn more?

This was part of my video course on CSS animation. As a fan of this site you can save a massive 93% on the course today.

Save over 90% and Level Up Your CSS Animation Skills today!

UI Animation in React

2019-05-12T00:00:00Z

On this site we've explored loads of big impressive animations. I thought it would be worth stepping back and looking at how small UI animations can add up.

In this post we'll take a look at a demo React app and explore how adding animations to situations when UI changes can result in a more polished experience. We'll try to do so in a way that means reusing animations so that the result is a more consistent style of animation through the app, and we'll take a look at a handy little React package we can use to make animations easier.

Video version

Note: the code is hard to see in the video, but you'll find all these examples and code below!

Demo project

Over on Github I've prepared a little React project to get started. If you've ever used Create React App, it'll be quite familiar. It's a basic React app with components, around which I've added styled-components to handle styling.

Styled Components is a handy way of wrapping CSS styling around components in React, allowing us to use Sass-style nesting but also provides us with a way of injecting a "theme" - a set of objects containing settings or snippets of CSS we can apply throughout our apps. We'll use this theme approach to create some simple but useful animations we can apply to projects.

You can clone the repo and run npm install to set up the necessary bits. Then run npm start to run it locally. You'll find it on localhost:3000 in the browser.

If you'd like to see the finished version, check out branch animated - otherwise you can follow along.

What we have is a simple Create React App, into which I've added some styled components goodness. You don't have to stick with Styled Components if you prefer Emotion or something else - got for it. It's just to illustrate the approach.

What we're starting with is a fairly simple little 3 page website with some "products" for sale on it. You can click between the products, you can select product variations, which results in their prices changing. You can even add them to the cart and see the cart button and cart total update.

In the project you'll find a components directory. This is where I've set up the components for the app. The include a product page, and smaller things like navigation, images and buttons.

You'll also find a theme folder. This is where I've set up some global CSS rules, along with some theme values that are injected into the components thanks to styled components. We'll look at how this can help make our animations reusable.

Opportunities to animate

When something changes, it's an opportunity to use animation. In this example we have lots of places where the UI changes.

Let's begin with the biggest change - moving between pages.

Page transitions

I'm a big fan of keeping things simple. I also love it when I can write something once and use it in many places. Let's do both to make the page transitions better.

Here's how they currently look. No animation, just sudden changes:

In the theme folder we'll open the index.js file. We already have a bunch of settings here I've thrown in to demonstrate how a theme might look, but it doesn't have any animations yet. Let's change that. Begin by adding an object with a set of CSS keyframes I'll call show.

Add to the top of theme/index.js:

In theme/index add a set of keyframes:

const keyframes = {
  show: `@keyframes show {
    to {
      opacity: 1;
      transform: none;
    }
  }`
}

This is a flexible little animation as it will simply apply an opacity of 1 and transform "none" to whatever we decide to apply it to.

As we're only using the to state in the animation, the starting state will be implied from the styles we give to our component.

This will be useful when we want to fade in the page content as we can set the page content to an opacity of 0, then apply the show animation.

With the keyframes in place then we set up an animation:

const animations = {
  show: `
    animation: show 500ms ease-out forwards;
    ${keyframes.show}
  `
}

Here we're creating an animations variable with another object, this time containing the same property name, show but the property contains the CSS code that applies the animation, and bundles the keyframes along with it.

Before we can use this we have to add it to the exports at the bottom of the file.

const theme = {
    animations,
    ...etc...

We can now apply our themed animation show to the pages. In components/ProductPage/index.js scroll down to the styling on line 44 and add:

${props => props.theme.animations.show};

As this is only applying the "to" or finished state of our animation, it won't do much. We need give the page a starting state.

animation-delay: 200ms;
opacity: 0;

So the page begins with an opacity of 0. We also apply an animation-delay to hold back the animation for 200 milliseconds - enough to make it a little more noticeable.

Testing this in the browser we have a simple but pleasant fade effect. Let's reuse the show animation once more.

This time in the .content part of the styles, add the following:

.content {
  ${props => props.theme.animations.show};
  animation-delay: 500ms;
  opacity: 0;
  transform: translateY(20px);
  margin: 0 40px;
}

We are reusing the show animation but this time waiting a little longer with a longer delay. Notice also the transform. This will be reset by the show animation, resulting in an animated slide up the screen as it fades in.

Feel free to experiment with other ways this could be used - maybe different timings on headings, paragraph content to create a staggered animation.

Other UI animations

There are still loads of places where things change in this UI. Let's bring in a handy library called React Animation and see how we can use it's helper components to make our changes animate.

React Animation

As you can see on the React Animation demo page, you get two helpful components to apply animation to UI elements. Let's apply each.

To begin, we install React Animation with npm install -S react-animation. We can now use it in our components!

Animating the price

Let's use the defaults and add a fade animation to the price when it changes. In components/ProductPage/index.js we begin by importing the AnimateOnChange component (at the top of the file):

import { AnimateOnChange } from 'react-animation'

Then we wrap the "price" text with this component:

<AnimateOnChange>{currentPrice}</AnimateOnChange>

By default, the AnimateOnChange component will look for any change in the children components and apply a fade-out and fade-in when they change.

We can configure this with some options.

Add to cart button

When adding an item to the cart, the text changes. Let's have this animate but with some more bounciness this time.

Around line 33 of components/ProductPage/index.js where we wrap the button's contents:

<AnimateOnChange animationIn="bounceIn" animationOut="bounceOut">
  {addingToCart ? 'Added to cart' : 'Add to Cart'}
</AnimateOnChange>

Here we're specifying animationIn and animationOut. You'll find more examples of built-in animations in the "Animations" section of the React Animation demo page.

Checking in the browser, we now have a bounce animation on click.

Cart total

Let's add some animation to the badge on the cart icon on the top-right. Currently it'll change each time we press "Add to cart" but there's no animation.

To make it really stand out, we might want to have it animate last. This would draw the eye toward the cart button - something we might want people to notice when shopping.

To do this we can use the durationOut prop.

In the components/CartButton/index.js file on line 13, replace the span with this:

<AnimateOnChange
  className="cart-button-total"
  animationIn="bounceIn"
  animationOut="bounceOut"
  durationOut={2000}
>
  {total}
</AnimateOnChange>

Notice that we're passing in the className. This applies the styling I've already set up for cart-button-total but it'll also apply the AnimateOnChange animation. In this case we're passing in 2000 (milliseconds) as the durationOut. This means it should disappear slowly, and animate back in later.

HideUntilLoaded

Now that we have the interactions animated, let's look at one more situation. When we change pages, the product images take a moment to load. Since they have a background shadow and background colour, this leaves big empty boxes visible for a moment before the image appears.

Let's fix this using HideUntilLoaded.

In the file components/ImageAndVariations/index.js we begin by importing the component:

import { HideUntilLoaded } from 'react-animation'

Then around line 41 we look for the img tag, which we'll wrap in the HideUntilLoaded component:

<HideUntilLoaded imageToLoad={image}>
  <img className="image" src={image} alt={title} />
</HideUntilLoaded>

Now when we change views, any new images will hold back on loading until ready.

You can find more options for HideUntilLoaded such as passing in a "Loading" component, using other animations and more on the React Animation demo page.

Be sure to check out the other ways the components can be used to bring animations to your UI!

Level up your CSS animation skills!

If you like this, you'll love my video course on CSS animation. As a fan of this site you can save over 90% on the course today.

Save over 90% and Level Up Your CSS Animation Skills today!

Scroll animations

2019-05-19T00:00:00Z

It's time to add some animation to our page when a visitor scrolls. For this tutorial I've set up a demo page all about pizza. We'll use this to learn how to have animations triggered by scrolling, and investigate ways we can do so efficiently.

In this tutorial we'll learn how to make use of the requestAnimationFrame as well as Intersection Observer methods to detect when elements are within the viewport of the browser. We'll introduce a new will-change property and use that to make sure our animations are smooth, and we'll put these together with some transitions to create animations that are triggered on scroll.

Note: The video doesn't include the Intersection Observer approach but you'll find it in the code below.

You'll find the HTML and CSS you need to get started in this sample code file. Look for folder 01-start. A completed version of this tutorial's code is in the folder 01-end.

Starting HTML

In the index.html file you'll find a couple of page sections. The first is a header that contains the main photo and heading text.

Beneath this we have a longer article. It's made up of paragraphs and images. I've added the class inline-photo to each of these images. We'll use this class to style the images, as well as animate them.

Let's see how it looks. We can see the images and the text, but no animation yet.

Showing on scroll

For this tutorial we'll be using some JavaScript. The idea is to check, as the page is scrolled, for any special elements we want to animate. If any of these special elements are visible, we can give them a special class and use CSS to animate or transition them into view.

To do this we'll need two things. We'll need the JavaScript to detect and add a class when one of these elements is visible, and we'll need to set up before and after styles on the elements.

JavaScript

Let's begin with our JavaScript. At the end of the HTML file you'll find a reference to the JavaScript file show-on-scroll.js. This is in the javascripts folder.

In our editor we'll open this file. It's blank for now. This is where we'll set up the code to detect scrolling and check for those elements we want to show.

We won't be using jQuery for this one. Instead we're going to use a handy method built in to browsers called requestAnimationFrame.

Back in the day when building something like this I'd have used the scroll browser event, and then checked the state of the page while scrolling.

window.addEventListener('scroll', function() {
  console.log("Scrollin'");
});

This might work in some ways, but sadly this has a couple of big problems. The first being efficiency. When scrolling, the console.log here will fire like crazy. If we're doing anything like parsing the DOM tree or other heavy tasks, this will add a lot of overhead to the browser. It could very easily slow things down and make our animations janky.

A second issue is iOS. Scrolling on some phones only results in this scroll trigger being fired after the scrolling has finished. We'd like this to work on mobile, so that's a big fail there.

Thankfully requestAnimationFrame solves these issues. It's a method that we can use to repeatedly check our page to see if elements are visible, while making sure we don't overload the browser by checking thousands of times per second. It does this by limiting how often the callback is executed to either the screen's refresh rate or 60 times per second.

60 times per second might sound like a lot but for the work we'll be doing it's very slow and won't overload the browser.

To set up our requestAnimationFrame method we'll apply it to a variable. This way we are able to have a fallback function for browsers that don't yet support it.

var scroll = window.requestAnimationFrame ||
            function(callback){ window.setTimeout(callback, 1000/60)};

Here we're saying that scroll should be the window.requestAnimationFrame method, or (if this isn't available), use this simple function that waits one-sixtieth of a second before calling the callback.

Next we'll grab the elements on the page we want to look out for.

var elementsToShow = document.querySelectorAll('.show-on-scroll');

This will look for all elements with class show-on-scroll and return them as an array we can loop through.

Let's set up that looping function.

function loop() {

  elementsToShow.forEach(function (element) {
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });

  scroll(loop);
}

We begin by setting up the function loop. This is a function we want to loop through all the elements and check if they're visible. We do this using the forEach method. For each of the show-on-scroll elements found this loop will check if it's in the viewport, and if so, add the class is-visible. Otherwise it'll remove the class.

Lastly we want to keep firing this function so we'll make use of our requestAnimationFrame helper we set up earlier, and pass this function as a callback.

This means that as soon as requestAnimationFrame allows us, it'll repeat this function and update classes as needed.

As it stands, this won't do much yet. We need to kick it off by calling the loop function.

loop();

Checking if in the viewport

There's one bit missing. In the loop function we're calling a method isElementInViewport. Unfortunately this isn't a browser method, we'll have to write that one ourselves. Here's a handy one I grabbed from Stack Overflow.

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

Just to run through this quickly. It begins by checking to see if jQuery is defined. jQuery changes the way elements are made available and this corrects for a possible issue that might arise. Next it uses a handy method called getBoundingClientRect. This is the rectangle around the element we want to check.

Next it does a series of checks that will return true if the element is on the page and on the screen.

Alternate approach: Intersection Observer

The above works pretty well, but there's a newer way to approach this problem using the browser's Intersection Observer API. This is quite well supported in browsers, with the exception of Internet Explorer (currently IE11 does not support this, so will need a polyfill).

The Intersection Observer looks at the target element's position in relation to a root element, and when they "intersect", will return true. In this case we can use it to tell us when our show-on-scroll elements are within the viewport.

When setting up an instance of IntersectionObserver we can pass in options such as the root element want, or even the "margin" by which the elements need to overlap. For now though I'll keep it simpler and just use the defaults. See the docs for more details.

We can replace the above JavaScript with this:

const callback = function(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-visible");
  });
};

const observer = new IntersectionObserver(callback);

const targets = document.querySelectorAll(".show-on-scroll");
targets.forEach(function(target) {
  observer.observe(target);
});

To step through this - it's first setting up a callback function that will be called every time one of our observed targets enters or leaves the viewport.

We then instantiate the observer using this callback function. With those two pieces put together, we then grab all our targets, and loop through them, attaching a listener (observe) to each one. When the element enters or leaves the viewport, it'll run the callback function.

Lastly, this callback function toggles the class is-visible on our element. This approach is simpler that the previous JavaScript but do keep in mind that it might not work so well in Internet Explorer currently. Check the CanIUse page for more info.

Let's save this and set up our HTML to make use of this new power.

Selecting the elements

While there's a bit going on there in the JavaScript, the result is quite simple. It's going to apply an is-visible class when selected elements show on the screen. Let's choose which elements we want to show.

In our index.html file we start by adding the class show-on-scroll to each of the photos.

<img src="images/pizza.jpg" class="inline-photo show-on-scroll">

Lastly we'll also add this class to the header of the page. It'll be nice to have an animation on the titles and since this is just adding a class, we can totally do that in CSS.

<header class="header show-on-scroll">

In our browser we can now test this. Opening the inspector we should see the is-visible class appearing and disappearing as we scroll.

Time to use this for some animation!

Animating the photos

In the scroll.css file in the stylesheets folder we find some initial styles for the photos. Let's set these up to be animated by making a few changes.

.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  max-width: 600px;
  width: 90%;
  will-change: transform, opacity;
}

We want these to fade in so we set the opacity to zero. Then we also want these photos to slide into place, so let's adjust the transform to translate them down 4em, and give them a few degrees more rotation.

Next we set up the transition we want to happen when these photos become visible. We add a transition for the transform, with a duration of 4 seconds, a quarter-second delay and the exponential ease-out timing function. We also fade it in using the opacity property, making it a little quicker than the transform.

We're using a delay so that if our visitor is scrolling slowly, the animation won't have finished before the photo is properly visible on screen. It's a small tweak helps the flow of the page.

Lastly we add a property we've not used yet, the will-change property. This is a way of telling the browser to prepare to animate the element. We supply this property the values transform and opacity.

With this done, the photos will be invisible. We need to add some CSS to make them visible.

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}

We add a new rule for the is-visible classed elements. In this we make them visible with opacity of 1, and we set the transform to just a slight rotation.

Here's how it looks, showing the images as we scroll down the page.

Animating the header

So far so good! Let's make use of the same JavaScript to bring animation to the header.

Earlier we added the show-on-scroll class to the header. We can make use of the is-visible class to animate this part too. We'll need to set up a couple of different animations. First we'll have it fade in, then the main photo will pop into place and the text will slide up into place beneath it.

Since we're doing this by applying a class, we have a situation where there's a change from one state to another. When we change from one state to another it's a good opportunity to use transitions, but if we wanted to do something more advanced here we could also use keyframes and animations.

For now though we'll get by with a couple of transitions. Whenever possible I like to try to use the simplest approach before jumping into more complex solutions.

We begin by fading in the header.

header {
  opacity: 0;
  transition: opacity .5s .25s ease-out;
}

header.is-visible {
  opacity: 1;
}

We create a header style block and set the opacity to 0, as well as add a transition for the opacity.

Next the header is given an opacity of 1 when the is-visible class is applied.

For the header image and title we'd like to scale the photo and push the text down a bit. We can add styles to do this.

.main-photo {
  transform: scale(.8);
}

.heading {
  transform: translate(-50%, calc(-50% + 1em));
}

This sets up the initial states of the elements. The photo is scaled down to .8 of it's normal size. The heading text is pushed down 1em. I'm using absolute positioning on this title text, setting the left and top to 50% of the header. This transform corrects by pulling the text back into the center and then adding an extra 1em to push it down a bit.

The next step is to add the styles for when the header has the is-visible class.

.is-visible .main-photo {
  transform: none;
}

.is-visible .heading {
  transform: translate(-50%, -50%);
}

We start with is-visible then main-photo to specify the photo when it's parent has the is-visible class. In this state we can remove the transform. For the heading text we want to position it in the center of the screen.

With the two states defined the last thing it to add a transition.

.main-photo,
.heading {
  transition: transform 4s .25s cubic-bezier(0,1,.3,1);
  will-change: transform;
}

We specify both the main-photo and the heading. For each of these we apply a transition to the transform property, with a long duration of 4 seconds, a delay as before, and the exponential ease-out timing function.

We'll also add a will-change property here to tell the browser to optimise the transform property on these elements for animating.

Let's see it in action.

Here we see that on load, the header fades in and the photo and text transition into place. If we scroll the page we see each of the photos fading in as they enter the viewport.

What we learned

In this tutorial we were introduced to the handy requestAnimationFrame method. We wrote a handy JavaScript utility to detect when an element is inside the viewport, and apply a class to it. We will be able to use this any time we want to trigger animations on an element on scroll.

We also made use of the will-change property, which allows us to hint to the browser which properties are going to be animated.

Level up your CSS animation skills!

If you like this, you'll love my video course on CSS animation. As a fan of this site you can save over 90% on the course today.

Save over 90% and Level Up Your CSS Animation Skills today!

Parallax scrolling

2019-05-26T00:00:00Z

Let's have some fun with parallax scrolling, using a handy JavaScript plugin called "Rellax" to animate a page with lots of elements scrolling at different speeds.

For this tutorial you'll find the HTML and CSS you need to get started in this sample code file. Look for folder 03-start. A completed version of this lesson's code is in the folder 03-end.

```html ```

What is parallax?

Parallax movement is when things move at different speeds relative to each other. It's a popular effect that can be used to create an illusion of depth. If we're moving, we see objects close to us move faster than objects further away.

The technique is popular in many places including video games, where it's usually seen in the layered backgrounds.

In this example we see how parallax works when scrolling a website.

Each of these boxes scrolls upward as I scroll down the page. The box in the middle, marked "No parallax" is scrolling at the same speed as the page. To it's left is a box that scrolls faster, and the box on the right scrolls slower.

This means that if I was to scroll the page up by 100 pixels, the "faster" box actually scrolls something like 130 pixels, and the "slower" box moves about 70 pixels.

In this example I'm using a tool called Rellax.

Rellax

The JavaScript utility Rellax is a handy, and quite simple plugin created by the design agency Dixon and Moe. It's lightweight and has no need for jQuery, and we can call it in from either local file or by using a CDN.

Looking into the code we find that it's using a very similar approach to our "show-on-scroll" code. It sets up a loop variable using "requestAnimationFrame", and then in each iteration uses CSS to translate each object by a calculated offset.

It's worth taking a look through how this was built if you'd like to see how a nice simple JavaScript utility can be written and shared.

Let's use it to bring our page some parallax movement.

Starting page

To get started we have a space-themed page taking us on a trip to the moon. Along the way we pass a bunch of rocks. We can use Rellax to have these elements scroll at different speeds.

We begin by adding Rellax to our page. In our index.html file, just before the closing body tag, add a reference to the script.

<script src="./javascripts/rellax.min.js"></script>
<script>
  var rellax = new Rellax('.rellax');
</script>

We also put in some JavaScript to activate Rellax. We pass the Rellax method a string that will be used to identify the elements it'll need to animate. In this case, we're going to use the class "rellax" on our elements.

With this in place we can add the "rellax" class. Scrolling back up the HTML we can look for each of the floating-rocks elements.

We add the rellax class to each like so.

<div class="floating-rocks front-one rellax">
  <img src="images/rock1.svg">
</div>

With the class applied to each of the rocks we can see the effect in the browser.

So it's working, the rocks are scrolling at a slower speed than the text, but it's not right yet. All the rocks are moving at the same speed as each other. We'd like to have some sit in front of the text and some behind, so let's achieve this using some Rellax settings.

Rellax settings

When working with Rellax we have two pieces of data we can pass in that will change the way the movement occurs. The first is speed.

We can tell each image to scroll at a different speed. The value is an integer where a negative number means it'll move more slowly than the normal scroll speed, and a positive number means it'll move at the same speed or faster.

In our HTML we again go to each of the images but this time add a speed. It's written as a data attribute data-rellax-speed.

<div class="floating-rocks front-one rellax" data-rellax-speed="8">
  <img src="images/rock1.svg">
</div>

The first rock is a small one that sits in front so we'll give it a fast speed of "8". The second one is far back so it's going to have a speed of "-2". The next one in front again, so we'll give a positive value of "3". The next rock is also far back so we'll give it a speed of "-3".

Lastly for planet earth we'll set it far back into the scene with a speed of "-4".

There's one more thing, "centering".

When Rellax calculates how far to move the elements it does so based on the height of the page. This means that elements further down the page will have moved more than elements at the top, as by the time we've scrolled all the way down there, they've been parallaxed to somewhere we may not expect.

We can get around this using centering. This will adjust the element's position so that when we scroll to it, it'll still be visible on the page. We can either do this by adding a data-rellax-percentage value to each of the rocks, or we can set this globally in our original JavaScript at the bottom of the page.

<script>
  var rellax = new Rellax('.rellax', {
    center: true
  });
</script>

In our JavaScript we add an object to be passed in to the Rellax method and in it we specify "center" be true. Back in our browser we can see the results.

The rocks now float in front as well as far away behind the text.

Before we finish up this example, let's also see how Rellax can bring our header and footer elements to life.

Animating the header and footer

At the top our document we have a header element containing an SVG logo and heading text. The SVG is inline so we can apply Rellax to each of the individual parts. That way on scroll, the logo will come apart as it scrolls away.

We start with the two circle elements.

<circle class="rellax" data-rellax-speed="-1" stroke="#000000" stroke-width="3" fill="#333333" style="opacity:.5" cx="100.5" cy="100.5" r="100.5"></circle>
<circle class="rellax" data-rellax-speed="-.5" stroke="#000000" stroke-width="3" fill="#aaa" style="opacity:.5" opacity="0.9" cx="100.5" cy="99.225" r="79.875"></circle>

Adding a class of "rellax" to each we can specify speeds. These two are farthest away so we'll use negative values of "-1" and "-.5" so they move quite slowly.

Next we have some <g> groups we can use to hook Rellax onto. The first contains the large boulder. We'll use this containing <g> rather than the large-boulder group as there's already a transform on that group. Since Rellax uses transforms, this would cause a clash so it's safest to use the container.

We'll add the "rellax" class and give this a speed of "2".

<g class="rellax" data-rellax-speed="2">

We then do the same for the "medium-boulder" and "small-boulder" containers, giving them a speed of "1.5" and "1.25" so that they move a little slower than the large boulder.

With that done lets add parallax to the heading. There's a gradient on the header element at the bottom that makes it fade to black. It would be cool if this text was to scroll in behind that gradient. We can do this by giving the title a very slow scroll speed.

<h1 class="heading rellax" data-rellax-speed="-5">MOON ROCKS</h1>

Lastly let's do the same with the header at the bottom of the page. Inside the footer element we apply the same thing but a speed of "-2" to the heading.

<h1 class="heading rellax" data-rellax-speed="-2">MOON ROCKS</h1>

Let's see how this is looking.

Fixing the header

After recording this lesson I noticed that the "center" setting caused the header and footer elements to position wrongly. Turns out the header elements don't need this to be set, and we can get around this by declaring another set of "Rellax" elements in the JavaScript.

var rellaxNonCentered = new Rellax('.rellax-non-centered', {
  center: false
});

By using the class "rellax-non-centered" on the header and footer elements instead of "rellax", this should fix the issue! The code in the download zip file has been updated with this change.

Parallax using CSS

While this example uses CSS and JavaScript for the positioning of the elements on scroll, it's possible to create a parallax effect using pure CSS. There's a great write-up of this approach by Paul Lewis and Robert Flack that goes into more detail. It's a great approach and seems to perform well.

What we learned

In this lesson we made use of a great JavaScript tool to create parallax movement on our page. Along the way we saw how this tool uses CSS transforms to move elements on scroll, using a similar requestAnimationFrame approach we've used ourselves. We also learned how to use Rellax with various speeds to create the illusion of depth on the page.

Level up your CSS animation skills!

If you like this, you'll love my video course on CSS animation. As a fan of this site you can save over 90% on the course today.

Save over 90% and Level Up Your CSS Animation Skills today!