Lesson 4

CSS Animations and Transitions

Prerequisites

A basic knowledge of CSS and HTML. Also, a will to learn and the patience to do so.

Objective

To teach the students about CSS animations and transitions and how to properly use them. As well as a simple way to spice up a site without the use of jQuery.

What are CSS Animations

CSS Animations are an element that gradually change from one style to another. You can change the variables as many times as you want. To use CSS animations you must first understand keyframes and how they work

Keyframe Rule

When you start to specify CSS styles inside the @keyframes rule, the animation will start to change gradually from the current style to the new style. To get the animation to work you must first bind the animations to a certain element. Below will be code listed to show how the example below this section is bound.

@keyframes myfirst
{
	
	0% {background-color:orange; left:0px; top:0px;}
	25% {background-color:blue; left:200px; top:0px;}
	50% {background-color:green; left:200px; top:200px;}
	75% {background-color:red; left:0px; top:200px;}
	100% {background-color:orange; left:0px; top:0px;}
	
}

animation-name

animation-name sets the name of the animation and how to call it. For example above you see @keyframes myfirst, myfirst is the name of the animation being called.

animation-duration

animation-duration sets how long the animation will run for to complete its cycle the one below is set for 5s.

animation-timing-function

The animation-timing-function is used to specify the speed curve of an animation. The speed curve sets the time the animation uses to change from one style to another style.

animation-delay

animation-delay is used to specify the delay to when the animation starts.

animation-iteration-count

animation-iteration-count is used to specify the number of times the animation will cycle.

animation-direction

animation-direction is used to set whether the animation should play in the reverse or not.

animation-play-state

animation-play-state is used to specify if the animation is running or paused.

Below is an example of the animation and a section where you can try to alter the code for yourself!

What Are CSS Transforms

A transform is a property that applies to a 2D or 3D transformation of an element, it allows you to scale, move, skew, rotate, ect., an element.

2D

transform:translate()

Translate allows you to move the element from its current position.

transform:rotate()

Rotate allows you to rotate the element either clockwise or counter clockwise.

transform:scale()

The scale method allows you to increase or decrease the size of an element.

transform:skew()

The skew method allows you to skew the element on either the X or Y-axis.

transform:matrix()

The matrix method allows you to combine all of the other 2D transforms into one.

Try it out!

3D

rotateX

The rotateX method rotates an element on the x axis given a certain degree.

rotateY

The rotateY method rotates an element on the y axis given a certain degree.

Try it out!

Make sure you change the deg (degrees) to see the rotation happen!

What Are CSS Transitions

CSS Transitions allows you to change the value of a property smoothly over a given duration an example would be a mouse over event which you will see below.

You can also change multiple values at one time.

Try It Here!

Prefixes

One last thing before we wrap this lesson up. Certain animations/transitions/transforms will only work if you have the proper prefixes infront of said items so heres a list of the proper prefixes

-webkit-property for chrome

-ms-property for internet explorer

-moz-property for firefox

-o-property for opera