web1: HTML, CSS & javascript

animation exercises 3.1 - 3.4

create an animation page with the following animations: (10 marks each)

  • a css3 transition
  • a 2d transform
  • a 3d transform
  • a keyframe animation

due: Oct. 25th at the end of class


CSS Animation

animation page

Animation on a web page can have many purposes

  • delight and entertain
  • create visual interest
  • help focus attention
  • enhance user interaction
  • improve the user experience

In this animation unit we will focus on the 4 types of animation that are considered best practices.

  • CSS3 transitions
  • 2d transform
  • 3d transform

Check out these animation demos


keyframe animation

Checkout the keyframe animation demo


parts of a web page

In groups of 2 or 3, open some web pages and identify various elements. You can use this list to help you:

  • header
  • footer
  • navigation
  • heading
  • subheading
  • sidebar
  • aside
  • figure
  • caption
  • table
  • pull quote
  • leader, lead
  • social media links
  • tab bar, nav bar


Create a web page for Web 1: HTML, CSS and Javascript which will link to all your exercises and projects.

It should include the following:

  • linked at student####/web1/ (check link from student list below)
  • your name
  • 2 or 3 things about yourself
  • 2 or 3 links to a site you think others in the class would like, but may not be aware of

connect via ftp...

due: August 30



nothing more to see here... go away