Looking at new CSS features

  • Home
  • Media Queries
  • Transitions
  • Animations
  • Contact

    • CSS Media Queries

    Media queries extend the functionality of media types by allowing more precise labeling of style sheets. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. To see the advantages of using media queries, resize your browser window by making it narrow, wide, common.

    CSS Transitions

    [an image] CSS Transitions enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. CSS transitions describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.

    CSS 3 Animations

    [an image] CSS Animations are similar to transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.