how to write Less mixin for keyframes.
I have tried in the following way but it is giving error,
ParseError: Directive options not recognized.
.keyFrameAlert(#-webkit-keyframes);
Mixin
.keyFrameAlert(#keyFrame){
#keyFrame alert {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 0;
}
}
}
can anybody help on this issue.
I think it might be throwing an error because of the # prefix for your keyframes, so where your passing #-webkit-keyframes it thinks your trying to pass it a variable with that same name.
There is a slightly different approach to this, where you can declare your keyframes, and add a class inside it which contains your keyframe set.
#-webkit-keyframes alert {.keyframes;}
#keyframes alert {.keyframes;}
.keyframes () {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 0;
}
}
This is slightly different to what you were trying previously, as you would still need to type out all of your vendor prefixes, but you only need to change your keyframes in one place.
Related
I'm trying to build an AMP page, and I'm having some problems validating some css. I have a H1 that has 4 words that I need to alternate. I did that by creating 4 spans inside with the words and animating their opacity to show/hide the ones I need (opacity is one of the whitelisted properties that you can animate with keyframes so there should't be any problems with that). It all works as expected, but the code isn't beeing validated by the AMP validator.
I get this error
CSS syntax error in tag 'style[amp-keyframes]' - incomplete
declaration.
for this css
<style amp-keyframes>
#keyframes words {
0% { opacity: 1; }
25% { opacity: 1; }
26% { opacity: 0; }
100% { opacity: 0; }
}
</style>
Any ideeas why that happens or maybe another solution for this?
Evrika!
Well... this has got to be the most annoying bug I've encountered. Apparently this is ok:
#keyframes word {
25% { content:"some text";}
50% { content:"other text";}
75% { content:"text";}
}
but this is not:
#keyframes word {
25% { content:"some text"; }
50% { content:"other text"; }
75% { content:"text"; }
}
LE: Found the real problem: between the end of the keyframe ";" and the clossing braket "}", I had a combination of spaces and non-breaking spaces. Removed those, and now it works.
I'm having a bit of a problem trying to make this idea work, if it is even possible in Sass syntax. I've seen similiar things being used in SCSS syntax and I've tried multiple things to make it work. All of them failed for now.
This is the code, you can see what the idea behind it is from the code:
#keyframes AdHop($from, $to)
0%
transform: scale($from)
100%
transform: scale($to)
So my question is; Is this even possible to do, if so, how?
You can make a mixin
DEMO
#mixin adHop($from, $to, $name) {
#keyframes #{$name} {
0% { transform: scale($from); }
100% { transform: scale($to); }
}
}
#include adHop(1, 2, cool);
button:hover { animation: cool 1s; }
I begun to use the LESS library exactly 2 hours ago.
( Time counted AFTER a successfull kind of a Hello World )
My LESS style sheet works.
Here is how I call it in my page:
<!-- LESS CSS -->
<link rel="stylesheet/less" type="text/css" href="myLessCssStyle.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>
I made the equivalent of a Hello world on a single CSS value easy to verify:
#testDisplay: none;
#bigVisibleElement{
display: #testDisplay;
}
Success!
Happy about that, since it was almost too easy...
I started to implement this serious variable handling advantage in a small test style sheet I was working on.
And here is where i'm stucked:
/* my LESS vars definition */
#Bes_ease_in_finish: 10%;
#Bes_ease_out_begin: 80%;
#Bes_ease_out_finish: 90%;
/* A couple more lines that includes other working LESS vars... */
/* This is bugging here. On the first LESS var. */
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#Bes_ease_in_finish { opacity: 1; } /* <--- Line 75 is here. */
#Bes_ease_out_begin { opacity: 1; animation-timing-function: ease-out; }
#Bes_ease_out_finish { opacity: 0; }
100% { opacity: 0 }
}
I defined all other prefix variants of #keyframes (-webkit-, -moz-, -o-, -ms-).
That isn't the problem.
Here is the error I get in console:
«Unrecognised input».
Arrrg... What ?!?
Can't use a LESS vars on these animation timing ?
Why?
Or HOW?
Is there a syntax trick ?
These timing values repeat 5 times FOR EACH animation because of these sickening prefixes... And this is a really simple #keyframes animation (fade in / fade out timing of a couple images) that I obviously wish to get more complex in the future.
THIS is the reason why I looked for LESS library.
Take you time... I wish to have a clear explicative answer.
Or some reference links to read.
My house isn't on fire.
Try this:
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#{Bes_ease_in_finish} { opacity: 1; } /* <--- Line 75 is here. */
#{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
#{Bes_ease_out_finish} { opacity: 0; }
100% { opacity: 0 }
}
Instead of #variable you should use #{variable} when using dynamic directives. (is directive the right word? dunno)
If declare a keyframe in a less file is all ok, but if i declare another keyframe(no tiping errors, I just duplicate working keyframe then change the name) less tell me unrecognized input. Instead, with saas have expected "{", was "#keyframes error.
the code:
#keyframes cloud-animation-1 {
from { transform:translate(0px,0);}
to{transform:translate(1000px,0);}
}
#-moz-keyframes cloud-animation-1 {
from {transform:translate(10px,0);}
to{transform:translate(1000px,0);}
}
#-webkit-keyframes cloud-animation-1 {
from {-webkit-transform:translate(0px,0);}
to{-webkit-transform:translate(1000px,0);}
}
#keyframes 2cloud-animation-2 {
from {transform:translate(10px,0);}
to{transform:translate(1000px,0);}
}
#-moz-keyframes cloud-animation-2 {
from {transform:translate(0px,0);}
to{transform:translate(1000px,0);}
}
#-webkit-keyframes cloud-animation-2 {
from { -webkit-transform:translate(0px,0);}
to{ -webkit-transform:translate(1000px,0);}
}
Solutions? Have missing something?
Thanks
I'm trying to use Angular-Strap to handle modal opening/closing from the controller. However the backdrop animation CSS given on the Angular-Strap docs keeps giving me errors - pretty sure I'm using it wrong, but I can't seem to find much info on how to use the CSS. Here's a plunker of the problem. It seems like it's the ampersands causing problems. Here is the code given on the angular-strap docs:
.modal-backdrop.am-fade {
opacity: .5;
transition: opacity .5s linear;
&.ng-enter {
opacity: 0;
&.ng-enter-active {
opacity: .5;
}
}
&.ng-leave {
opacity: .5;
&.ng-leave-active {
opacity: 0;
}
}
}
Edit: To further clarify, opening/closing the modals doesn't cause me problems. The CSS actually does seem to work until it gets to the &.ng-enter.
Changed CSS to look like so:
.modal-backdrop.am-fade {
opacity: .7;
transition: opacity .35s linear;
}
.modal-backdrop.am-fade.ng-enter {
opacity: 0;
}
.modal-backdrop.am-fade.ng-enter.ng-enter-active {
opacity: .5;
}
.modal-backdrop.am-fade.ng-leave {
opacity: .5;
}
.modal-backdrop.am-fade.ng-leave.ng-leave-active {
opacity: 0;
}
I see you've effectively figured out the problem, but for completeness' sake: the syntax with the ampersands is using LESS CSS style syntax.
As you assumed, the ampersand is used as the parent element, so in this case, '&' gets preprocessed to become '.modal-backdrop' because it is used within the braces of the .modal-backdrop's CSS.
LESS adds a layer of syntactic sugar on top of CSS, but requires a pre-processor to do a pass over the LESS to convert it all to standard CSS, which is why it wouldn't have worked for you until you manually did the preprocessing.
See: http://lesscss.org/
(Note: I'd add this as a comment instead of an answer, but I can't yet comment on posts because I don't have enough internet points.)