This document provides an overview of CSS3 transitions and animations for front-end web development. It discusses how to use CSS3 transitions to gradually change styles between elements without JavaScript. It also covers how to create animations in CSS3 using @keyframes to control steps and binding animations to selectors using properties like animation-name and animation-duration. Examples are provided to demonstrate transitions and animations. The document concludes with information on using Animate.css for easy CSS3 animations and an egg drop game lab assignment.

1. Front-End
Web Development
Lesson 17
Animation

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

3. Review
Application Form
To Do List

4. CSS3 Transitions
With CSS3, we can add an effect when
changing from one style to another …
● without using Flash animations
● without using JavaScript

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

6. CSS3 Transitions
Must specify two things:
● the CSS property you want to add an
effect to
● the duration of the effect

7. CSS3 Transitions
Note: If duration is not specified, the transition
will have no effect.
Why? The default value is 0.

8. CSS3 Transitions
properties
● transition
● transition-delay
● transition-duration
● transition-property
● transition-timing-function

9. CSS3 Transitions
properties
● transition -- a shorthand property for
setting the four transition properties into a
single property

10. CSS3 Transitions
properties
● transition-delay -- specifies when the
transition effect will start

11. CSS3 Transitions
properties
● transition-duration -- specifies how
many seconds or milliseconds a transition
effect takes to complete

12. CSS3 Transitions
properties
● transition-property -- specifies the name
of the CSS property the transition effect is
for

13. CSS3 Transitions
properties
● transition-timing-function -- specifies
the speed curve of the transition effect

14. CSS3 Transitions
WebKit-based browsers
● Safari
● Chrome (until version 28)
complete list of browsers
complete list of WebKit CSS properties

15. CSS3 Transitions
Example:
transition_1.html

16. 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

17. CSS3 Transitions
Example: Using Individual Properties
transition_3a.html
Example: Combining Individual Properties
transition_3b.html

18. CSS3 Animations
With CSS3, we can create animations which
can replace …
● Flash animations
● animated images
● JavaScripts
... in existing web pages.

19. 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.

20. 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

21. 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.

22. 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

23. CSS3 Animations
properties
● @keyframes
● animation
● animation-delay
● animation-direction
● animation-duration

24. CSS3 Animations
properties
● @keyframes -- controls the intermediate
steps in a CSS animation sequence by
establishing keyframes (or waypoints)
along the animation sequence

25. CSS3 Animations
properties
● animation -- a shorthand property for
setting all the animation properties, except
○ animation-play-state
○ animation-fill-mode

26. CSS3 Animations
properties
● animation-delay -- specifies when the
animation will start

27. CSS3 Animations
properties
● animation-direction -- specifies whether
or not the animation should play in
reverse on alternate cycles

28. CSS3 Animations
properties
● animation-duration -- specifies how
many seconds or milliseconds an
animation takes to complete one cycle

29. CSS3 Animations
more properties
● animation-fill-mode
● animation-iteration-count
● animation-name
● animation-play-state
● animation-timing-function

30. 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"

31. CSS3 Animations
more properties
● animation-iteration-count -- specifies
the number of times an animation should
be played

32. CSS3 Animations
more properties
● animation-name -- specifies the name of
the @keyframes animation

33. CSS3 Animations
more properties
● animation-play-state -- specifies whether
the animation is running or paused

34. CSS3 Animations
more properties
● animation-timing-function -- specifies
the speed curve of the animation

35. CSS3 Animations
Example:
animation_1.html

36. 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

37. 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

38. CSS3 Animations
Example: Using seven animation properties
animation_4a.html
animation_4b.html

39. CSS3 Transitions
Just-add-water CSS animations with Animate.
css
Easy CSS3 Animation with Animate.css
How To Use Animate.css

40. Lab
Egg Drop Game
● work in teams of two