JavaScript can be very complicated. Maybe not all of it, but a good portion of it. You have to not only comprehend variables, but also understand the functions, methods, and events that control those variables. The overall purpose of JavaScript, as you know, is to make a webpage more interactive. But what if you could do a couple of interactive things using CSS? During the last lesson, you learned how to use transitions and transformations that involve some kind of interaction. During this lesson, you will learn and demonstrate how to build an animation for a page.

Below are some helpful tips and resources that you can use during and after this lesson is over.

CSS Style Tips to Remember

• Animation is the illusion of motion by an object or shape that is being slowly or rapidly changed.
• To make an animation work in CSS3, you first need something called a @keyframe rule, which codes the path of an animation.
• Every @keyframe needs an animation name (anything you want to call it). For example, in CSS, the selector might look like this: @keyframe anime1 { from: 20px; to: 40px; }
• To make an animation property work, the @keyframe needs to have a path (from, to, 50%, etc).
• The animation-name property must recall the same name that was given to the @keyframe.
• The animation-timing-function property defines how rough or smooth an animation takes place (ease, linear, ease-out, etc).
• Every animation requires an animation-duration property which defines how long it will take for that animation to take place. For example, animation-duration: 3s;.
• If the animation-iteration-count property is set to “infinite,” then the animation will continue happening infinitely, rather than than 3, 4, 5, or some other number of times.
• Like anything else in HTML or CSS, making a successful animation takes practice and patience. Use the resources, videos, and Try-It Editors to experiment.

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, finish the remaining lessons (you will need your headphones).

68. Keyframes & Animation
69. Animation Properties
70. 3D Transforms
71. Module 7 Quiz

COMPLETE ALL OF THE CSS FUNDAMENTALS SECTIONS
IN SOLOLEARN AND SUBMIT YOUR CERTIFICATION

Assignment #2 (1 Point): Design Project
No one has ever gotten this far, so if you’re here, you should consider yourself quite skilled in HTML and CSS. If asked, you can probably explain almost anything you’ve designed throughout the entire semester. This is your final assignment and it only has one requirement: Add a Keyframe Animation of some kind to any one of the pages you have designed. Animation is the act of bringing something to life, so you’re basically being asked to bring an old page to life by using the last couple of skills you picked up on SoloLearn about KeyFrames and Animation.

Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.

Assignment #4 (1 Point): eCampus Checkin
You no longer have any review sheets or review quizzes other than the final ICT Exam at the end of the semester. But if you have gotten this far, you still need to check in on eCampus and complete the quiz question that asks whether you finished all the assignments in this lesson. Once you’ve done that, you’re all set for the next lesson.

TOTAL ASSIGNMENT GRADE VALUE: 4 POINTS

Congratulations!

You have completed all of the lessons for Web Design II!