WWDC2015 animation effects

Every year, Apple holds a major conference. WWDC (Apple Developer Conference) is a great opportunity for iOS developers and OSX developers to learn about Apple's advanced technologies and new concepts for mobile devices and desktop software.

Every year at this time they come up with lots of new ideas, and this year I was struck by an icon made with simple circles and shapes, so I decided to implement it using HTML and CSS.

WWDC 15 invitation card

Apple icons usually use a combination of colors and shapes, such as the iOS 7 Photos icon. This year's WWDC invitation used the following one.

It consists of a series of stacked and translucent shapes, which is very suitable for implementing with HTML and CSS.

HTML

Designing something this complex requires a little analysis. First, I break it down into its components. In general, it is made up of three shapes, with the main shapes being eight large circles. I'll list them first:

Here I divide it into several classes, which makes it easier to extract large, circle, and other classes and write them separately later, and the code will be much neater.

Then we have eight small shapes, located on top of the big circle. These shapes are made up of 4 circles and 4 squares. The squares have rounded corners. I wrote the HTML like this:

I used circle, squircle and numbers 1 to 8 to set class names for each div. The advantage of this is that it is very convenient to set their shapes and colors later.

***We put the two big squares upside down in the middle of the logo.

Again, I used large and squircle.

Logo and content

Next we add some content to the middle square.

Here we use an SVG image and the content of the invitation. The font of the invitation is San Francisco, but the font is not OSX standard, so I changed it to Helvetica Neue Light.

Writing circle and square styles

The first thing I need to do is style the circle and squircle.

Most shapes are large, so I set the default values ​​to large. Each element has an absolute positioning and a white border. The border may not be exactly the same as the invitation, but it can give the shape a little more shine.

Next we style the large circle, setting the border-radius to 50%, and positioning it using the left and top values.

At this time, all the circles are in the same position. We use a little trick to change the position through the transform-origin value. The default transform-origin value is (50%, 50%). Here we set the value to the bottom of the circle, and then we rotate it slightly, and the shape will appear.

Let's add CSS styles to each circle. Looking closely at the invitation image, we can see that one circle is positioned in the lower left corner. Knowing this, we can write the other rotation angles for the circles.

Each block has a color and is rotated by a certain angle. The animation below shows the generation process in action.

With these prototypes, we can write styles for other shapes. First, the square can also be seen as a circle with different rounded corners.

After we positioned the circle, we gave it a specific rotation angle and color. Fortunately, the same shape can also use the same style, so we write the style for the small shape.

We make these shapes smaller and further away from the center, and use the same trick as above.

#p#

Small Cube

The small square is at the wrong angle, we need to rotate it 45 degrees.

There are two approaches we can choose from here, we can add an extra element to each square and rotate it, or we can choose pseudo-classes in CSS. Both methods will work, but I prefer the latter.

First we remove the background color, border, and box shadow.

We use the ::after pseudo-class to create an identical square, rotated 45 degrees.

Now we have our big circle and other small shapes.

Content Block

Two large squares contain all the content. We position them in the middle and give them a darker transparent color.

We can rotate the first large square.

Add animation

The original invitation was static, but our website is called CSS Animation Rocks for a reason.

I want to separate each collection. To do this, I wrap them in span elements. I can then apply the animation to the span elements.

We first position the span elements to prevent them from overflowing.

Each span element is positioned to the midpoint.

Next we apply the animation to each span element.

We used the same keyframes but changed the animation time to 10s, 20s, and 30s. So they return to their original position after one minute.

The keyframes are as follows

The starting position rotation angle is 0, and the final rotation angle is 360 degrees.

Reuse CSS

This was a fun experiment, but I think the biggest takeaway is the reuse of CSS. It’s very convenient to use the same CSS for the rotation and the small shapes. And all the animations use the same keyframes. This helps keep the CSS file size down, which keeps it loading faster.

Prefix

When creating this example, I used autoprefixer so that I don’t have to consider the browser kernel every time I write animations.