Created
March 20, 2012 18:45
-
-
Save raybrownco/2139592 to your computer and use it in GitHub Desktop.
I just stumbled across theCSSguru's animate mixin for Sass (http://thecssguru.freeiz.com/animate/) and found it very useful for including animations in my Sass files. However, I saw room for improvement in the keyframe code. Below is a comparison of the s
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Using a list to loop through each prefix and cut down on duplicated code | |
| $keyframe-prefixes: (-webkit-keyframes, -moz-keyframes, -ms-keyframes, keyframes) | |
| @each $prefix in $keyframe-prefixes | |
| @#{$prefix} fadeIn | |
| 0% | |
| opacity: 0 | |
| 100% | |
| opacity: 1 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Original keyframe code found at http://thecssguru.freeiz.com/animate/ | |
| @-webkit-keyframes fadeIn | |
| 0% | |
| opacity: 0 | |
| 100% | |
| opacity: 1 | |
| @-moz-keyframes fadeIn | |
| 0% | |
| opacity: 0 | |
| 100% | |
| opacity: 1 | |
| @-ms-keyframes fadeIn | |
| 0% | |
| opacity: 0 | |
| 100% | |
| opacity: 1 | |
| @keyframes fadeIn | |
| 0% | |
| opacity: 0 | |
| 100% | |
| opacity: 1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey! Yeah it's erroring on line 5 of your new code for @#{$prefix} - it doesn't like the @...
I was doing the same thing in my tests and it wasn't having it, so trying to find a solution to this, and from what I have seen so far there isn't one just yet, hmm.