Animation/Keyframes Mixin

// Animations and keyframes @mixin keyframes($animation-name) { @-webkit-keyframes $animation-name { @content; } @-moz-keyframes $animation-name { @content; } @-ms-keyframes $animation-name { @content; } @-o-keyframes $animation-name { @content; } @keyframes $animation-name { @content; }} @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; } //Usage @include keyframes(slide-down) { 0% { opacity: 1; } 90% { opacity: 0; }} .element { width: 100px; height: 100px; background: black; @include animation('slide-down 5s 3');}

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.