While validating for CSS3, following error can be seen for my Website:
Sorry, the at-rule #-moz-keyframes is not implemented
Below is the CSS code:
Line 16:
#-moz-keyframes spin {
0% {
-moz-transform:rotate(0deg)
}
100% {
-moz-transform:rotate(359deg)
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg)
}
}
#-ms-keyframes spin {
0% {
-ms-transform:rotate(0deg)
}
100% {
-ms-transform:rotate(359deg)
}
}
#keyframes spin {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(359deg)
}
}
.fa-rotate-90 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg)
}
I would like to know what kind of CSS validation Error is this and what can be the better solution for this error
According to caniuse, the -moz-animation (and corresponding #-moz-keyframes) was used by Firefox 5-15.
Most likely the validator you're using assumes (rightly) that effectively all serious users (at least 99.65% of Firefox users, even less in the total scope of things) will be using a more modern Firefox than Firefox 15.
As a result, it's pretty safe to leave it out if you're want to remove the "error".
Related
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 hope your friday evening is going great so far!
I've ran into a really really weird bug in Safari, I'll tell you the story about it here:
A few months back, I got an assigment from my web developer teacher to make a site with modern and advanced web technologies, and I deicided to make a re-designed landing page for the code editor 'Coda'. It's been going great so far, but a few days ago I implented a #Keyframe animation for an SVG file. It works great in Coda on my Mac, but not in Safari? I first thought that I made a mistake somewhere, but I've added both #Keyframes with and without the -webkit- prefix, and then I saw that it didn't work on my mobile devices either.. I'll show my code here:
#-webkit-keyframes color_change {
0% { fill: #41B9D1; }
20% { fill: #9BFF1B; }
40% { fill: #F27E18; }
60% { fill: #FFD700; }
80% { fill: #FF0066; }
100% { fill: #41B9D1; }
}
#keyframes color_change {
0% { fill: #41B9D1; }
20% { fill: #9BFF1B; }
40% { fill: #F27E18; }
60% { fill: #FFD700; }
80% { fill: #FF0066; }
100% { fill: #41B9D1; }
}
#-webkit-keyframes color_change_2 {
0% { fill: #127093; }
20% { fill: #FF0066; }
40% { fill: #FFD700; }
60% { fill: #F27E18; }
80% { fill: #9BFF1B; }
100% { fill: #127093; }
}
#keyframes color_change_2 {
0% { fill: #127093; }
20% { fill: #FF0066; }
40% { fill: #FFD700; }
60% { fill: #F27E18; }
80% { fill: #9BFF1B; }
100% { fill: #127093; }
}
#Shape2 { /* SVG path I'm changing the fill on */
-webkit-animation: color_change 10s infinite alternate;
animation: color_change 10s infinite alternate;
}
#Shape3 { /* the other SVG path I'm changing the fill on */
-webkit-animation: color_change_2 10s infinite alternate;
animation: color_change_2 10s infinite alternate;
}
And now to the weird part, the animation works fine on ANY other devices except for MY ones.. And that includes an iPhone 6 and a brand new iPad Pro 9.7" running iOS 9.3.1 aswell as a rMBP running OS X 10.11.4 with Safari 9.1. I've tested the site on 4 other iPhones(4S, 5C, 6S) and all of them work fine.. Although, the 5C ran the animation the first time and now refuses to play it at just like mine(although mine never displayed it at all).
I've ensured that the animation works separately and #Keyframes works fine on all devices, and yet only MY personal ones has this problem on THIS site... I've tested with and without private mode enabled. It's also worth to mention that it works fine in 3rd party browsers such as Puffin and iCab, and also when I open it with the Safari View Controller in different apps...
Does anyone have a clue on what's going on?
I can PM the URL to the site if needed as I wouldn't like to post it here publicly.
Thanks!
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.
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 have realized that I can't simple accomplish the same code below by separating by coma #keyframes mymove, #-moz-keyframes mymove, etc... In order for them to work I need to declare it each one separately as below.
Is there any way to group them and make this code shorter?
#keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
#-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
no, I don't think so, but you could use a CSS language (aka CSS preprocessor) like SASS/SCSS/LESS/... - the output (CSS) would still be the same, but changing something would be much easier!
Check out
http://sass-lang.com/
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
if you're interested - the effort of installing them and setting them up is totally worth it!
EDIT: Using SCSS I did the following:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} { #content; }
#-moz-keyframes #{$name} { #content; }
#keyframes #{$name} { #content; }
}
example of usage:
#include keyframes(pulse) {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Although it should be added that you need the latest pre-release of SASS to be able to nest rules (we have got a "{" inside another "{" rule...) so you should update run "gem install sass --pre" which should get you "sass-3.2.0.alpha.104"