• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
53
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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