Front-EndWeb Development

Lesson 17Animation

Agenda

● Review● CSS3 Transitions● CSS3 Animations● Animate.css● Lab - Egg Drop Game

Review

Application Form

To Do List

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another …

● without using Flash animations● without using JavaScript

CSS3 Transitions

CSS3 transitions are effects that let an element gradually change from one style to another.

CSS3 Transitions

Must specify two things:

● the CSS property you want to add an effect to

● the duration of the effect

CSS3 Transitions

Note: If duration is not specified, the transition will have no effect.

Why? The default value is 0.

CSS3 Transitions

properties● transition● transition-delay● transition-duration● transition-property● transition-timing-function

CSS3 Transitions

properties● transition -- a shorthand property for

setting the four transition properties into a single property

CSS3 Transitions

properties● transition-delay -- specifies when the

transition effect will start

CSS3 Transitions

properties● transition-duration -- specifies how

many seconds or milliseconds a transition effect takes to complete

CSS3 Transitions

properties● transition-property -- specifies the name

of the CSS property the transition effect is for

CSS3 Transitions

properties● transition-timing-function -- specifies

the speed curve of the transition effect

CSS3 Transitions

WebKit-based browsers● Safari● Chrome (until version 28)

complete list of browserscomplete list of WebKit CSS properties

CSS3 Transitions

Example:

transition_1.html

CSS3 Transitions

Example: Making Multiple Changes

To add transition effects for more than one CSS property, separate the properties with a comma.

transition_2.html

CSS3 Transitions

Example: Using Individual Properties

transition_3a.html

Example: Combining Individual Properties

transition_3b.html

CSS3 Animations

With CSS3, we can create animations which can replace …

● Flash animations● animated images● JavaScripts

... in existing web pages.

CSS3 Animations

An animation lets an element gradually change from one style to another.You can change as many properties you want, as many times you want.

CSS3 Animations

You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).

● 0% represents the start of the animation● 100% is when the animation is complete

CSS3 Animations

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.

CSS3 Animations

Bind the animation to a selector (element) by specifying at least these two properties:

● the name of the animation● the duration of the animation

CSS3 Animations

properties● @keyframes● animation● animation-delay● animation-direction● animation-duration

CSS3 Animations

properties● @keyframes -- controls the intermediate

steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence

CSS3 Animations

properties● animation -- a shorthand property for

setting all the animation properties, except ○ animation-play-state○ animation-fill-mode

CSS3 Animations

properties● animation-delay -- specifies when the

animation will start

CSS3 Animations

properties● animation-direction -- specifies whether

or not the animation should play in reverse on alternate cycles

CSS3 Animations

properties● animation-duration -- specifies how

many seconds or milliseconds an animation takes to complete one cycle

CSS3 Animations

more properties● animation-fill-mode● animation-iteration-count● animation-name● animation-play-state● animation-timing-function

CSS3 Animations

more properties● animation-fill-mode -- specifies what

styles will apply for the element when the animation is not playing ..

○ when it is finished, or○ when it has a "delay"

CSS3 Animations

more properties● animation-iteration-count -- specifies

the number of times an animation should be played

CSS3 Animations

more properties● animation-name -- specifies the name of

the @keyframes animation

CSS3 Animations

more properties● animation-play-state -- specifies whether

the animation is running or paused

CSS3 Animations

more properties● animation-timing-function -- specifies

the speed curve of the animation

CSS3 Animations

Example:

animation_1.html

CSS3 Animations

Example: Change the background color when the animation is 25%, and 50%, and again when the animation is 100% complete.

animation_2.html

CSS3 Animations

Example: Change the background color and the position when the animation is 25%, 50%, 75%, and again when the animation is 100% complete:

animation_3.html

CSS3 Animations

Example: Using seven animation properties

animation_4a.htmlanimation_4b.html

CSS3 Transitions

Just-add-water CSS animations with Animate.css

Easy CSS3 Animation with Animate.css

How To Use Animate.css

Lab

Egg Drop Game

● work in teams of two