Skip to content

Instantly share code, notes, and snippets.

@celestelayne

celestelayne/css-animations.md

Last active August 29, 2015 14:24
Show Gist options
  • Save celestelayne/8bef9255663a59e07c48 to your computer and use it in GitHub Desktop.
Save celestelayne/8bef9255663a59e07c48 to your computer and use it in GitHub Desktop.
Download ZIP
Lightning Talk :: CSS Animations
Raw
css-animations.md

CSS ANIMATIONS

Topics:

  • Animations
  • Transitions
  • Vendor Prefixes - What are they and why do we need them?

ANIMATIONS

CSS Animations are made up of two basic building blocks:

  • Keyframes
  • Animation Properties

TRANSITIONS

VENDOR PREFIXES

  • Small strings prepended to CSS properties that will ensure that the property will only be valid and rendered within the given browser engine

  • WebKit: -webkit (Chrome and Safari)

  • Firefox: -moz

  • Examples: -webkit-transition-property, -moz-animation-name

  • Let someone else do the work:

  • Autoprefixer - add vendor prefixes to CSS rules using values from can i use

  • Use a task runner like Gulp or Grunt

  • npm install gulp-autoprefixer –-save

RESOURCES

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment