CSS3 Transitions

• Page 8: Flipping Card
  “For example, you may want to make a card game more realistic by taking 200 milliseconds to animate the flipping of a card, as the user may not realize what happened if there is no animation.”
• Page 8: Drop Down Menu
  “As another example, you may want your site’s drop-down menus to expand or
  become visible over 200 milliseconds (instead of instantly) which may be jarring.”
• Page 9: Initial v. focused state
  “By initial state, I mean a state that matches the element on page load.”
• Page 12: :valid, :invalid and :focus
  “either the :valid or :invalid selector matches, but never both. The :focus selector matches some of the time, when the input has focus, whether the input is matching the :valid or :invalid selector”
• Page 13: Menu with bad UX
  “The transition properties in the destination or hover state are used when hovering over the list item. When no longer hovered over, as it returns to the default scaled-down state, the transition properties of the default properties it is returning to—the nav li ul condition—are used.”
• Page 13: Drop Down Menu
  “Reverse the transition on mouse out.”
• The transition-property property
  • Page 14: No transition proerties
  • Page 15: transition-property with property names
  • Page 16: transition-property: all;
  • Page 17: transition-property on .foo
    The properties being transitioned can be inherited properties.
  • Page 17: transition-property: all, border-radius, opacity;
    If you include all among properties, include it first in the comma separated transition-property property value.
• Page 21: Transition Events
• The transition-duration property
  • Page 22: Transition Duration
    An example changing color as value changes from valid to invalid
  • Page 23: transition-duration all with same duration
  • Page 23: transition-duration all with different durations
  • Page 23: transition-duration with only 2 duration values
• The transition-timing-function property
  • Page 29: transition-timing-function: ease-in;
  • Page 30: transition-timing-function with a comma-separated value
    Showcasing the predefined cubic-bezier keyterms and step values
  • Page : transition-timing-function with a single duration
    Same as above, but the durations are all the same
• The transition-delay property
  • Page : transition-delay: 0s, 200ms;
  • Page : transition-delay each incrementing by the duration
    Note these examples are set to take 10X the time set in the book. This is to make it more grokable.
  • Page : transition-delay + transition-duration are all equal
    All the animations end at the same time as the delay + duration = 18s for every transitioning property.
  • Page : transition-delay: 50ms;
    Generally, you’ll want a duration of 100ms to 200ms, and a delay of 50ms
  • Page : Negative value for transition-delay
    Note the transition starts 3/4ths of the way thru
• Reverse Transitions
  • Page 41: Different delays in initial versus final state.
    The value used is the value listed in the to state.
  • Page 42: Drop down menu with bad UX
    Menu has different transitions durations and timing functions in the initial and destination states
• Repeating Values
  • Page 45: Repeating Values
  • Page 46: Repeating Values
    Even when there are different number of values present.

Next Chapter: Animations