Skip to content

Instantly share code, notes, and snippets.

@annez
Forked from pixelthing/gist:9782842
Last active August 29, 2015 13:57
Show Gist options
  • Save annez/9783177 to your computer and use it in GitHub Desktop.
Save annez/9783177 to your computer and use it in GitHub Desktop.
Animation mixin with Compass
/* animation mixins */
@mixin animation($name, $duration: 500ms, $fill_mode: forwards, $iteration_count: 1, $delay: 0, $direction: normal, $timing_function: ease)
+experimental(animation-name, $name)
+experimental(animation-duration, $duration)
+experimental(animation-fill-mode, $fill_mode)
+experimental(animation-iteration-count, $iteration_count)
+experimental(animation-delay, $delay)
+experimental(animation-direction, $direction)
+experimental(animation-timing-function, $timing_function)
@mixin keyframe ($animation_name)
@-webkit-keyframes #{$animation_name}
@content
@-moz-keyframes #{$animation_name}
@content
@keyframes #{$animation_name}
@content
/* example animation */
@include keyframe(pointypoint)
0%
+transform(translateY(0))
50%
+transform(translateY(10px))
100%
+transform(translateY(0))
.bob:hover
@include animation(pointypoint, 500ms, forwards, infinite)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment