Skip to content

Instantly share code, notes, and snippets.

@TimPetricola
Last active December 14, 2015 06:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TimPetricola/5044440 to your computer and use it in GitHub Desktop.
Save TimPetricola/5044440 to your computer and use it in GitHub Desktop.
Keyframes mixin for SASS
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@keyframes #{$name}
@content
=vendor($property, $value)
-webkit-#{$property}: $value
-moz-#{$property}: $value
-o-#{$property}: $value
#{$property}: $value
=animation-name($name)
+vendor(animation-name, $name)
=animation-duration($duration)
+vendor(animation-duration, $duration)
=animation-fill-mode($mode)
+vendor(fill-mode, $mode)
+keyframes(fadeIn)
0%
+opacity(0)
+scale(.9, .9)
100%
+opacity(1)
+scale(1, 1)
.my-selector
+animation-name(fadeIn)
+animation-duration(1s)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment