• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lesson 17
 

Lesson 17

on

  • 42 views

 

Statistics

Views

Total Views
42
Views on SlideShare
42
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lesson 17 Lesson 17 Presentation Transcript

    • 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 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 browsers complete 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.html animation_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