I'm attempting to perform a CSS animation, where a number of images are cycled through. I appreciate that normally one would use a sprite (and doing so works with this code), however as I wish to use this animation in iBooks, I have to keep to a 2 million pixel limit on each image, so instead I'm using separate images. So I'm attempting to use the following CSS, but to no success:
#sprite {
width: 200px;
height: 170px;
background:url('../Images/monkey1small.png') 0 0;
-webkit-animation-duration:4000ms;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:animate01;
-webkit-animation-direction:forward;
-moz-animation-duration:1ms;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:step-start;
-moz-animation-name:animate01;
}
#-webkit-keyframes animate01 {
0% { background:url('../Images/monkey1small.png') 0 0; }
20% { background:url('../Images/monkey2small.png') 0 0; }
40% { background:url('../Images/monkey3small.png') 0 0; }
60% { background:url('../Images/monkey4small.png') 0 0; }
80% { background:url('../Images/monkey5small.png') 0 0; }
100% { background:url('../Images/monkey1small.png') 0 0; }
}
#-moz-keyframes animate01 {
0% { background:url('../Images/monkey1small.png') 0 0; }
20% { background:url('../Images/monkey2small.png') 0 0; }
40% { background:url('../Images/monkey3small.png') 0 0; }
60% { background:url('../Images/monkey4small.png') 0 0; }
80% { background:url('../Images/monkey5small.png') 0 0; }
100% { background:url('../Images/monkey1small.png') 0 0; }
}
It is called with a simple div:
At the moment it just statically displays the first image. I can add other css properties to the frames and it will animate those properties, however trying to change the background url as shown in the code above, does not work. Any suggestions?
What you posted works fine in Chrome and Safari (http://jsfiddle.net/4rAer/) but doesn't do a thing in Firefox. Where it dies in Firefox is the inclusion of a background image. You can animate background in Firefox - but only background colour. But if this is just for iBooks that shouldn't matter. I'm assuming the animation doesn't work in iBooks either.
This fiddle has a filmstrip that should have better support. It does require some additional HTML but I animating the Top property has broad support. http://jsfiddle.net/4rAer/1/
see here:
http://chrismar.sh/2011/07/19/animating-sprites-using-css/
Do not animate the background-image property, do the background-position one!
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 would like to do a reusable sass function that makes it easy for me to write a #keyframes css animation without writing too much code but I'm not sure how to go about it, especially the math part.
i have a div containing a single background image with this css
height: 100vh;
width: 8000px;
this background image is composed of 25 frames. so each frame is 320px wide.
the animation should translateX() the div by multiple of 320px every 4%, so something like this:
#keyframes animation {
0% {
transform:translateX(0);
}
4% {
transform:translateX(-320px);
}
8% {
transform:translateX(-640px);
}
...
}
i would like to make a function of this but I'm new to scss functions and i really don't know where to start. if someone could give me a hint that would be great!
thanks
Could be better (modularise) but here is for you;
#mixin deneme($i){
#for $i from 0 through 100/$i {
#{$i * 4}% {
transform:translateX(#{-320 * $i});
}
}
}
UPDATE:
I think this one is a bit better.
#mixin deneme($increase, $angle){
#for $x from 0 through 100/$increase {
#{$x * $increase }% {
transform:translateX($angle * $x);
}
}
}
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)
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.
Obviously GIFs do not support an alpha channel. If I waned an alpha-channel capable “throbber,” “spinner,” or Ajax loading indicator, it seems the only (post-IE6) cross-browser option would be a sprited PNG containing all the states of the throbber.
I guess I would be animating it myself using JavaScript to advance the frames (using requestAnimationFrame when available) by changing a class or something that sets the background origin.
I can't seem to find anything that helps generate this, specifically. Does anyone know of any? Any best practices I should know about? (I know that e.g. Compass has a sprite helper I can take advantage of for automating the CSS portion, at least.)
I don't think there are any "best practices", but there are a lot of tools out there. Start by doing a search for "animated gif to sprite". If you have ImageMagick installed take a look at this post:
http://forums.tigsource.com/index.php?topic=9041.msg282280#msg282280
Once you have a sprite the options for animation all depend on how you prefer to code your javascript.
What is your browser matrix? If you have the luxury (FF, Safari, Chrome, etc.) you can use CSS animation like the following which assumes each frame is 100px square and you sprite has 5 frames.
#animatedImage {
width: 100px;
height: 100px;
background: transparent url(sprite.png) no-repeat 0 0;
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-timing-function: step-start;
animation-name: animateSprite;
}
#-webkit-keyframes animateSprite {
0% { background-position: 0 0; }
20% { background-position: -400px 0; }
40% { background-position: -300px 0; }
60% { background-position: -200px 0; }
80% { background-position: -100px 0; }
100% { background-position: 0 0; }
}