I am trying to get a <div> element to rotate constantly on the spot using CSS3. I have a jsFiddle all set up with the HTML and CSS3 but it's not doing a thing. Any help?
http://jsfiddle.net/8FUK8/
Please note I am testing in Chrome and therefore only using the -webkit- prefix at the moment.
do the same thing for keyframe change #keyframes to #-webkit-keyframes
I answered a similar question recently. Here's a jsfiddle for your convenience. You can fine-tune the styles to fit your needs, but the rotation styles will be left intact.
You should use animation and #keyframes compatibility selectors. for example
-moz-animation:1s foo infinite alternate;
-ms-animation:1s foo infinite alternate;
-webkit-animation:1s foo infinite alternate;
#-moz-keyframes foo {}
#-ms-keyframes foo {}
#-webkit-keyframes foo {}
Related
I have a question about rendering speed for the css3 transition property.
Suppose I have a number of elements:
div, span, a {transition: all}
div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
It's much more efficient to target all of the transitions for all of those elements using one declaration div, span, a {transition: all}. But my question is: would it be "faster" in terms of the smoothness and quickness of the animation rendering to target each element's specific transition property? For example:
div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
My logic in asking this is that if the css "engine" has to search for "all" transition properties even if there is just one single property for an element, that it might slow things down.
Does anyone know if that's the case? Thanks!
Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.
The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.
So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.
There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)
I've been using all for cases where I needed to animate more than one rule. For example, if I wanted to change the color & background-color on :hover.
But it turns out that you can target more than one rule for transitions, so you never need to resort to the all setting.
.nav a {
transition: color .2s, text-shadow .2s;
}
I'm trying to use tween max and superscroll script, to handle opacity of my content while scrolling.
This works like a charm in chrome, safari, ff, ie9 and ie10.
However, I have an issue with ie8.
You can see the problem in this page : http://www.promenade-sainte-catherine.com/localisation
When scrolling down in ie8, the menu on the left changes its color to become white. This is okay, and once the animation is finished, it becomes green again.
This is my css :
body #menuGaucheContainer #menuGauche .logoPSC {
position: relative; zoom:1;}
/* line 270, sass/partial/_global.scss */
body #menuGaucheContainer #menuGauche .logoPSC #log1, body #menuGaucheContainer #menuGauche .logoPSC #log2 {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
position: absolute;
top: -109px;
left: 75px; }
And this is the tweenmax call
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#img2Localisation'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#log2'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
If I remove the "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);" line. Then it works good, but nothing have an opacity of zero at the beginning of the page.
If I add css:{opacity:X, alpha:X}, nothing changes,
If I change {css:{opacity:0}} to {css:{alpha:0}}, it kind of works, but I still have some issues.
Does anyone have any idea ?
Thanks
I also had this issue with a new version of Greensock, and it's not because the plugin, but because of CSS. The error is in the beginning statement:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
While this is perfectly ok if you don't want to support IE7, it will break TweenMax's animation rules. The fix is to add the IE5-IE7 css rule, even if you won't support IE7 in general:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
It looks like you're using a VERY old version of the GreenSock files (TweenMax). You should definitely update - that may fix the problem right there. http://www.greensock.com/?download=GSAP-JS Otherwise, try tweening to opacity:0.99 instead of 1 solves things for you. But again, I'm pretty sure that updating will help because if my memory serves correctly, this particular scenario had a workaround applied in a TweenMax update a while back.
I have a question about rendering speed for the css3 transition property.
Suppose I have a number of elements:
div, span, a {transition: all}
div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
It's much more efficient to target all of the transitions for all of those elements using one declaration div, span, a {transition: all}. But my question is: would it be "faster" in terms of the smoothness and quickness of the animation rendering to target each element's specific transition property? For example:
div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
My logic in asking this is that if the css "engine" has to search for "all" transition properties even if there is just one single property for an element, that it might slow things down.
Does anyone know if that's the case? Thanks!
Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.
The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.
So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.
There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)
I've been using all for cases where I needed to animate more than one rule. For example, if I wanted to change the color & background-color on :hover.
But it turns out that you can target more than one rule for transitions, so you never need to resort to the all setting.
.nav a {
transition: color .2s, text-shadow .2s;
}
how do you do non-linear animation with css3?
Basically, if I need to bring a box in from out of the view port, and its a straight down path, then its easy enough to do with the following code:
*{
transition: transform 0.5s ease-in;
}
-- And some JS to trigger the animation with a transform: translate3d(0,300px,0);
But what happens when the element is rotated? Say by 25 deg? Then for the animation to look somewhat natural, it'll need to progress in a 25 deg offset line, and cannot just be top-down, or left-right animations...
I hope I'm making sense here... Look at the demo here http://jsfiddle.net/YMHT4/8/
I'm trying to get the blue box to animate in on a slanted path...
I'm not sure if I'm understanding correctly, but if you're trying to do what I'm thinking, then the answer is quite simple:
function ani()
{
if (!state)
{
$('#otherbox').css('-webkit-transform', 'translate3d(100px,150px,0) rotate(25deg)');
state=true;
}
else
{
$('#otherbox').css('-webkit-transform', 'translate3d(0,0,0) rotate(25deg)');
state=false;
}
}
If you change both x and y in translate3d(x,y,z), then both dimensions will animate, and you will get a diagonal path animation.
http://jsfiddle.net/YMHT4/17
I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#loading img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
I have tried changing the animation duration but it makes no difference, if you slow it right down say 5s its just more apparent that after the first rotation there is a pause before it rotates again. It's this pause I want to get rid of.
Any help is much appreciated, thanks.
Your issue here is that you've supplied a -webkit-TRANSITION-timing-function when you want a -webkit-ANIMATION-timing-function. Your values of 0 to 360 will work properly.
You also might notice a little lag because 0deg and 360deg are the same spot, so it is going from spot 1 in a circle back to spot 1. It is really insignificant, but to fix it, all you have to do is change 360deg to 359deg
my jsfiddle illustrates your animation:
#myImg {
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
Also what might be more resemblant of the apple loading icon would be an animation that transitions the opacity/color of the stripes of gray instead of rotating the icon.
You could use animation like this:
-webkit-animation: spin 1s infinite linear;
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}
If you're only looking for a webkit version this is nifty: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html from http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
Your code seems correct. I would presume it is something to do with the fact you are using a .png and the way the browser redraws the object upon rotation is inefficient, causing the hang (what browser are you testing under?)
If possible replace the .png with something native.
see; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
Chrome gives me no pauses using this method.
I made a small library that lets you easily use a throbber without images.
It uses CSS3 but falls back onto JavaScript if the browser doesn't support it.
// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);
// Start the throbber.
throbber.play();
// Pause the throbber.
throbber.pause();
Example.