Your SlideShare is downloading. ×
0
Front-End
Web Development
Lesson 17
Animation
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 animation...
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-timin...
CSS3 Transitions
properties
● transition -- a shorthand property for
setting the four transition properties into a
single ...
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 ...
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 browsers
complete list of Web...
CSS3 Transitions
Example:
transition_1.html
CSS3 Transitions
Example: Making Multiple Changes
To add transition effects for more than one
CSS property, separate the p...
CSS3 Transitions
Example: Using Individual Properties
transition_3a.html
Example: Combining Individual Properties
transiti...
CSS3 Animations
With CSS3, we can create animations which
can replace …
● Flash animations
● animated images
● JavaScripts...
CSS3 Animations
An animation lets an element gradually change
from one style to another.
You can change as many properties...
CSS3 Animations
You can specify when the change will happen
in percent, or you can use the keywords "from"
and "to" (which...
CSS3 Animations
When an animation is created in the
@keyframe rule, you must bind it to a selector,
otherwise the animatio...
CSS3 Animations
Bind the animation to a selector (element) by
specifying at least these two properties:
● the name of the ...
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 key...
CSS3 Animations
properties
● animation -- a shorthand property for
setting all the animation properties, except
○ animatio...
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 alter...
CSS3 Animations
properties
● animation-duration -- specifies how
many seconds or milliseconds an
animation takes to comple...
CSS3 Animations
more properties
● animation-fill-mode
● animation-iteration-count
● animation-name
● animation-play-state
...
CSS3 Animations
more properties
● animation-fill-mode -- specifies what
styles will apply for the element when the
animati...
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 1...
CSS3 Animations
Example: Change the background color and
the position when the animation is 25%, 50%,
75%, and again when ...
CSS3 Animations
Example: Using seven animation properties
animation_4a.html
animation_4b.html
CSS3 Transitions
Just-add-water CSS animations with Animate.
css
Easy CSS3 Animation with Animate.css
How To Use Animate.c...
Lab
Egg Drop Game
● work in teams of two
Upcoming SlideShare
Loading in...5
×

Lesson 17

121

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
121
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 17"

  1. 1. Front-End Web Development Lesson 17 Animation
  2. 2. Agenda ● Review ● CSS3 Transitions ● CSS3 Animations ● Animate.css ● Lab - Egg Drop Game
  3. 3. Review Application Form To Do List
  4. 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. 5. CSS3 Transitions CSS3 transitions are effects that let an element gradually change from one style to another.
  6. 6. CSS3 Transitions Must specify two things: ● the CSS property you want to add an effect to ● the duration of the effect
  7. 7. CSS3 Transitions Note: If duration is not specified, the transition will have no effect. Why? The default value is 0.
  8. 8. CSS3 Transitions properties ● transition ● transition-delay ● transition-duration ● transition-property ● transition-timing-function
  9. 9. CSS3 Transitions properties ● transition -- a shorthand property for setting the four transition properties into a single property
  10. 10. CSS3 Transitions properties ● transition-delay -- specifies when the transition effect will start
  11. 11. CSS3 Transitions properties ● transition-duration -- specifies how many seconds or milliseconds a transition effect takes to complete
  12. 12. CSS3 Transitions properties ● transition-property -- specifies the name of the CSS property the transition effect is for
  13. 13. CSS3 Transitions properties ● transition-timing-function -- specifies the speed curve of the transition effect
  14. 14. CSS3 Transitions WebKit-based browsers ● Safari ● Chrome (until version 28) complete list of browsers complete list of WebKit CSS properties
  15. 15. CSS3 Transitions Example: transition_1.html
  16. 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. 17. CSS3 Transitions Example: Using Individual Properties transition_3a.html Example: Combining Individual Properties transition_3b.html
  18. 18. CSS3 Animations With CSS3, we can create animations which can replace … ● Flash animations ● animated images ● JavaScripts ... in existing web pages.
  19. 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. 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. 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. 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. 23. CSS3 Animations properties ● @keyframes ● animation ● animation-delay ● animation-direction ● animation-duration
  24. 24. CSS3 Animations properties ● @keyframes -- controls the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence
  25. 25. CSS3 Animations properties ● animation -- a shorthand property for setting all the animation properties, except ○ animation-play-state ○ animation-fill-mode
  26. 26. CSS3 Animations properties ● animation-delay -- specifies when the animation will start
  27. 27. CSS3 Animations properties ● animation-direction -- specifies whether or not the animation should play in reverse on alternate cycles
  28. 28. CSS3 Animations properties ● animation-duration -- specifies how many seconds or milliseconds an animation takes to complete one cycle
  29. 29. CSS3 Animations more properties ● animation-fill-mode ● animation-iteration-count ● animation-name ● animation-play-state ● animation-timing-function
  30. 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. 31. CSS3 Animations more properties ● animation-iteration-count -- specifies the number of times an animation should be played
  32. 32. CSS3 Animations more properties ● animation-name -- specifies the name of the @keyframes animation
  33. 33. CSS3 Animations more properties ● animation-play-state -- specifies whether the animation is running or paused
  34. 34. CSS3 Animations more properties ● animation-timing-function -- specifies the speed curve of the animation
  35. 35. CSS3 Animations Example: animation_1.html
  36. 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. 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. 38. CSS3 Animations Example: Using seven animation properties animation_4a.html animation_4b.html
  39. 39. CSS3 Transitions Just-add-water CSS animations with Animate. css Easy CSS3 Animation with Animate.css How To Use Animate.css
  40. 40. Lab Egg Drop Game ● work in teams of two
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×