I have the following scss file in my project
&.care-loading-icon{
.glyphicon-refresh-animate {
#include care-loading-animation
}
#keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
#-webkit-keyframes spinw {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spinm {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
}
I'm wondering if there is any way to simplify this with bourbon?
Looks like, from the documentation that you can use the mixin keyframes to simplify your keyframes implementation.
Like such
#include keyframes(spin) {
from { #include transform(0deg); }
to { #include transform(360deg); }
}
Related
I am trying to make a web page, and I need to use some images with transform/transition. But the Scss compiler from WebStorm gives me that error.
What can I do ? See in the image above.
For your #include you need to #mixin.
#MIXIN example:
#mixin protoName($someValue) {
-webkit-protoName: $someValue;
-moz-protoName: $someValue;
-ms-protoName: $someValue;
protoName: $someValue;
}
For yours code it can be something like this:
#mixin transform($val) {
-webkit-transform: $val;
-moz-transform: $val;
-ms-transform: $val;
transform: $val;
}
main {
.wrap {
#include transform(rotate(45deg) translate3d(0,0,0));
}
}
And your output look like this:
main .wrap {
-webkit-transform: rotate(45deg) translate3d(0,0,0);
-moz-transform: rotate(45deg) translate3d(0,0,0);
-ms-transform: rotate(45deg) translate3d(0,0,0);
transform: rotate(45deg) translate3d(0,0,0);
}
You can read more about it Here
I have this code for a loading spinner, it works in all browsers, except safari, where it breaks the entire site, I've narrowed it down to the issue being the webkit specific code below but can't figure out why it brakes, any ideas:
#-webkit-keyframes spin{ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; }
#-webkit-keyframes spinoff{ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); }; }
You have unnecessary semicolons after the 100% definition in your code. Apparently Safari chokes on it while the others ignore it.
#-webkit-keyframes spin{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes spinoff{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); }
}
We have a lot of animation planned and am looking for a cleaner way to address all browsers. Something sass-y like this would be great:
#each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
##{$browser}keyframes rotate {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
}
Except that the ##{$vendor}keyfr... produces an error expecting a number or function after the #. Is there a way to force the # through to the css?
Otherwise, has anyone come up with a cleaner way to accomplish this with #each, #mixin or anything else that would save from listing every animation for every browser (i.e. below)?
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes rotate {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
#-o-keyframes rotate {
from { -o-transform: rotate(0deg);}
to { -o-transform: rotate(360deg);}
}
#-ms-keyframes rotate {
from { -ms-transform: rotate(0deg);}
to { -ms-transform: rotate(360deg);}
}
You could do that with a mixin, where you pre-define the vendor keyframes instead of dynamically generating the vendors in a loop. Something along these lines maybe:
#mixin keyframes($animationName) {
#-webkit-keyframes #{$animationName} {
$browser: '-webkit-'; #content;
}
#-moz-keyframes #{$animationName} {
$browser: '-moz-'; #content;
}
#-o-keyframes #{$animationName} {
$browser: '-o-'; #content;
}
#keyframes #{$animationName} {
$browser: ''; #content;
}
} $browser: null;
#include keyframes('rotate') {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
DEMO
Just to keep the mods going...
http://sassmeister.com/gist/554597ba07c49dbd92ce
#include makeKeyframes('badgeGlow') {
from { #include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
50% { #include box-shadow(0px 0px 16px rgba($glowToColor, 0.8), 0px 1px 2px rgba(0, 0, 0, .80));color:white;border-color: lighten($glowBaseColor, 20);}
to { #include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
}
button.glow {
#include setKeyframeType('badgeGlow',1.5s,infinite);
}
Note here that you invoke the keyFrame generator once and you can refer to the keyframes from anywhere else in your classes with the setKeyframeType mixin and provide some basic parameters. Great when you've got many elements that may share the same type of transitions.
Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.
STANDARD CSS
#-webkit-keyframes crank-up {
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes crank-up {
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes crank-up {
100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
100% { transform: rotate(360deg);}
}
I'm using the same mixin as in the following post SASS keyframes not compiling as wanted which is shown below.
MIXIN
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
The above is OK, as long as none of the keyframes include a property that requires a vendor prefix. Like the transform property as all the vendor prefixed keyframes get applied with (in this case) the -webkit- prefix.
For example:
SCSS
#include keyframes(crank-up) {
100% { -webkit-transform: rotate(360deg);}
}
CSS
#-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
#-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
#-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
#keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
Notice the above, -webkit- with a -moz-keyframe. Should be -moz-
So, my first thought was to alter the above mixin to:
ALTERED MIXIN
#mixin keyframes($first-name, $last-name, $argument) {
#-webkit-keyframes #{$first-name} {
-webkit-#{$last-name}: #{$argument};
}
#-moz-keyframes #{$first-name} {
-moz-#{$last-name}: #{$argument};
}
#-o-keyframes #{$first-name} {
-o-#{$last-name}: #{$argument};
}
#keyframes #{$first-name} {
#{$last-name}: #{$argument};
}
}
With a call to the mixin looking like
SCSS
#include keyframes(crank-up, transform, rotate(360deg)) { }
CSS
#-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
#-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
#-o-keyframes crank-up { -o-transform: rotate(360deg); }
#keyframes crank-up { transform: rotate(360deg); }
This works all ok if there is only ONE Keyframe 'stage' (see in original code - top of page, there's only the 100% mark), excuse if my terminology is slightly off in reference to keyframe 'stage'.
PROBLEM
I want a mixin like the above to work with something like.
#-webkit-keyframes crank-up {
20%,
40% { -webikit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
I have also looked into the two Compass Animate plugins; compass-animation and the newer compass-animate but not really sure if these can help. I need some way of adding in a variable and testing for this with a mixin but don't know if it's possible to pass variable into mixins.
Any help much appreciated. Thanks
I've been playing around with the following but neither work, just thought I'd add them up to see if anyone knows where I'm going wrong.
EXPERIMENTAL MIXINS:
#mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){
#{$webkit}: #{$name}: #{$argument};
#{$moz}: #{$name}: #{$argument};
#{$o}: #{$name}: #{$argument};
#{$stale}: #{$name}: #{$argument};
}
#mixin vendor-prefix($last-name, $argument){
#if $name == webkit {
-webkit-#{$name}: #{$argument};
} #else if $name == moz {
-moz-#{$name}: #{$argument};
} #else if $name == o {
-o-#{$name}: #{$argument};
} #else {
#{$name}: #{$argument};
}
}
To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.
Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.
So, in your case, you just need to write this:
#keyframes crank-up {
20%,
40% { -webkit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
And autoprefixer converts it automatically to:
#-webkit-keyframes crank-up {
20%, 40% {
-webkit-transform: translateY(34px);
}
80% {
opacity: .8;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes crank-up {
20%, 40% {
-webkit-transform: translateY(34px);
}
80% {
opacity: .8;
}
100% {
-webkit-transform: rotate(360deg);
}
}
Autoprefixer is widely supported, you can process your scss or css styles with this tool through Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...
Here is more info about the project
If you are already using Compass and don't want to load whole bounce of extra library and just want to write some mixing then THIS is the best option.
/* animation mixing
keyframe animation
#include animation('animation-name .4s 1')*/
#mixin animation($animate...) {
$max: length($animate);
$animations: '';
#for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
#if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
And here is the keyframe Mixing to include CSS3 properties inside particular browser vender prefix, instead of #include translate, we use the full css (Note: if you're using Sass 3.3 or older, you'll need to remove the !global flag):
#mixin keyframes($animationName) {
#-webkit-keyframes #{$animationName} {
$browser: '-webkit-' !global;
#content;
}
#-moz-keyframes #{$animationName} {
$browser: '-moz-' !global;
#content;
}
#-o-keyframes #{$animationName} {
$browser: '-o-' !global;
#content;
}
#keyframes #{$animationName} {
$browser: '' !global;
#content;
}
} $browser: null;
For your reference here is the SASS example:
#include keyframes(animation-name) {
0% {
#{$browser}transform: translate3d(100%, 0, 0);
}
100% {
#{$browser}transform: translate3d(0%, 0, 0);
}
}
And here how you include your animation to the particular class or ids
.new-class {
#include animation('animation-name 5s linear');
}
That's all.
Perspective based rotation : I have a div which i want to rotate in CSS3 using webkit. The div is rotated after a usermouse down event in jquery
I use keyframes to do that
#-webkit-keyframes rotate {
enter code here
0% {
-webkit-transform: rotate(0deg);
}100% {
-webkit-transform: rotate(90deg);
}
}
#-webkit-keyframes rotate2 {
0% {
-webkit-transform: rotate(90deg);
-webkit-transform: rotateX(45deg);
}100% {
-webkit-transform: rotate(180deg);
-webkit-transform: rotateX(45deg);
}
}
#-webkit-keyframes rotate3 {
0% {
-webkit-transform: rotate(180deg);
}100% {
-webkit-transform: rotate(270deg);
}
}
#-webkit-keyframes rotate4 {
0% {
-webkit-transform: rotate(270deg);
}100% {
-webkit-transform: rotate(360deg);
}
}
My question is I have also applied webkit perspective to give a 3d kind of view and I have to rotate the div keeping the perspective X angle to 45deg...how is it possible ?
body {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 500;
-webkit-perspective-origin: 45%;
}
#mydiv {
height: 300px;
width: 100px;
border: 2px solid #D3DAED;
position:absolute;
top:29%;
left:45%;
**-webkit-transform: rotateX(45deg);**
}
I don't really understand exactly what you are trying to do, but in jquery you can alter css dynamically like this:
$('#mydiv').css('-webkit-transform', 'rotateX(45deg)');