Photo of Professor Lawley

Professor
Lawley

Website Design
& Implementation

IGME-230 / Fall 2018

CSS Animation Exercise
(Week 8, Tuesday 10/16)

Today you're going animate some elements on an HTML page that I've created, using the techniques shown in the CSS Animations tutorial. If you haven't done that tutorial, you should use today's class to do that first, and then, if you have time, work on the exercise.

Previewing What You're Going to Make

Because I can't give you a link to the working version of the page without also revealing the code to accomplish it, I've uploaded a video clip to YouTube showing how the page behaves when it first loads, and when mousing over specific elements. Watch it here: https://www.youtube.com/watch?v=uMmTnIRB_8c.

Setting Up Files

Create a new folder for this exercise in your igme230 directory. Right click on cssanimation.zip, and choose "Save File As..." to download it. Extract the cssanimation directory and put it in your igme230 directory.

All of the CSS for this exercise will go into "CSS Animation" section of the animation.css page. When you're done, put a link to the completed animation.html file on your landing page, and upload the files to your repository.

Page Load Animation

As you can see in the video, when the page first loads, the four columns of content in the middle of the page fly in from the left side. You're going to combine animation techniques used in the "clouds" exercise in the tutorial (chapter 3, part 1).

Start with the "drift" keyframe animation code from the clouds example in the tutorial. Put that into your animatios.css file, naming the @keyframe animation as "entrance", and then edit it to have a starting translateX value of -2000px (to put the content off the left side of the screeen), and a finishing value of 0,so that it ends up in its original position.

Apply the resulting "entrance" animation to "main div" (all divs inside the main element), with a duration of .5 seconds, a linear path, and "both" to use both forward and backwards fills, and then test the page. It should work, but all the elements will fly in at the same time.

To fix that problem, you can do one of two things. You can assign a unique ID to each of the columns and then specify timings for each of them individually, or you can use the "nth-child" technique shown in the "up & over" example in the tutorial (chapter 3, section 4).

The disadvantage of adding an ID to each item is that it requires you to also the edit the HTML file, while the "up & over" approach allows you do this completely in CSS using the "nth-child" attribute to set up four different timings for the four different columns. For example, "main div:nthchild(1)" refers to the first div child of the main element. You can set the timing for the first div inside main like this, using .5s as the animation timing, and 2s as the delay for it to take place:

main div:nth-child(1) {
animation: entrance .5s 2s linear both;
}

Repeat that code block for the 2nd, 3rd, and 4th children of main, decreasing the delay by .5s for each, so that the 4th image slides in first, followed by the 3rd, 2nd, and then 1st.

Expanding Images

To make the gallery images grow when you mouse over them, we could use keyframe animation, but there's actually an easier way to do this with CSS transistions.

We want to apply a transition property to each image in the main element, so that whenever something changes, it happens with a gentle easing in and out. Then we want to assign a transform property to the hover state, so that it scales up on hover (and, by default, back down when hover state is lost).

main img { transition: all .2s ease-in-out; }
main img:hover { transform: scale(1.2); }

Rotating Icons

Finally, we want each of the four social media icons at the bottom of the page to rotate around their Y axis when we hover over them.

To do this, we'll modify the spin animation in the "sticker" example (chapter 3, section 3) so that it rotates on the Y axis, replacing rotate(1turn) with rotateY(360deg). Once you've added the @keyframe spin animation to your CSS, you can apply it to the icons in the footer using the hover pseudo-class:

a:hover .fa {
animation: spin .5s linear both;
}

Submitting Your Work

When you're done, add a link to your landing page and push the files to GitHub. Files must be available by the start of class on Thursday, 10/18.