Skip to content

Instantly share code, notes, and snippets.

@ivanxuu
Forked from Integralist/1. Example.scss
Last active December 25, 2015 14:59
Show Gist options
  • Save ivanxuu/6995038 to your computer and use it in GitHub Desktop.
Save ivanxuu/6995038 to your computer and use it in GitHub Desktop.
css 3 animations using sass syntax. Examples provided
+keyframe(fadeout)
0%
opacity: 1
100%
opacity: 0
+keyframe(changecolor)
0%
color: #000
100%
color: #FFF
// Use in a element like <div id="target_element"></div>
div#target_element
+animation( changecolor, 5s )
=keyframe($animation_name)
@-webkit-keyframes #{$animation_name}
@content
@-moz-keyframes #{$animation_name}
@content
@keyframes {$animation_name}
@content
//************ Example usage: *************************
// +animation( changecolour 5s )
// +animation( dissapear, 5s, $delay: 3s )
//---------------fill---------------------
//forwards Element position ends on final frame.
//backwards Element returns to position of first frame.
//both Sets the element to the position of the first keyframe immediately on page load, regardless
// of the element’s default location in other CSS. Only applicable if animation-delay has a
// value greater than 0.
//none Element starts and ends at initial default position provided by CSS outside of keyframes.
//******************************************************
=animation( $animation, $duration, $timing-func: linear, $fill: forwards, $delay: 0 )
-webkit-animation: $duration $delay $animation $fill $timing-func
-moz-animation: $duration $delay $animation $fill $timing-func
animation: $duration $delay $animation $fill $timing-func
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment