I should preface this by saying that I am brand new to the world of SVGs. I'm playing around with a rather simple experiment using SVGs and CSS3 animations.
I have created the SVG in Inkscape and saved it as a plain SVG. I've then put it into HTML to play around with some CSS3 animations.
As you can see from my link below the whole SVG bounces strangely, this can be removed by removing the .arm class from the CSS. (which stops the single red circle group that has an arm class).
The problem is that I want the red circle groups to animate (spin) whilst the entire larger group is also spinning.
Any ideas or blatant things I may be doing wrong? (I do realize it's not the best SVG but I was just experimenting).
http://codepen.io/Fernker/pen/cwvfB
Note 1: After playing around a bit more if I remove either .arm or .center CSS rules then the wobble stops, but together they produce the wobble.
Here I fixed it for you (kind of).
http://codepen.io/anon/pen/unmfE
Basically I hacked it so it works, but you'll need to wrap your SVG in another container and have that rotate from center. If you animate too far down the nest, it will be affected by siblings.
It looks as though the shape is not creating a perfect circle when spinning, therefore shifting the center whilst spinning causing the wobble.
Related
I have a background image that has a parent div with a transform: scale with an animation applied to it, giving the effect of the background image zooming in slowly when you land on the page.
It renders perfect accross the board except in ie 10/11. I've got all the proper pre-fixes added in, but still get a really shaky and choppy animation in ie.
I've researched and applied acceleration hacks, but nothing gives.
Does anyone have a fix or has seen something along these lines?
Thanks!
I had the same problem, but just with an image, not background image, and for me the solution was to give transform: rotate(0.01deg); to the parent of the scaled element.
Of course you will have a minimal rotation, so it depends on your css codes, if this wouldn't cause another problem.
Most likely it's because it's an image and there are not "in between" pixel renderings when doing transforms. I'm not sure there's a solution to this problem right now.
You could try doing it in canvas, though I know that's usually not the desired route to go.
I am using transform CSS property to rotate text but the seems to come differently in different browser, I tried it with different fonts it doesn't come smooth.
is their a way i can make it smooth. link for image
jsFiddle example
a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. that's all i got for you. makes it a bit smoother.
I have the following code:
http://jsfiddle.net/RFMxG/1/
When the transition runs, you can see a padding of about 20-30 pixels on the left hand side. Despite the fact I have set the transform-origin to be 0,0,0, it is still not correctly rotating about the y-axis. The left edge of the blue box should be flush against the left hand edge at all times during the animation.
Can anyone tell me what I've done incorrectly?
Okay, there are whole bunch of issues here:
1) CSS transforms aren't animatable using transitions. If you look at the W3C list of transitionable properties, you'll notice that transform isn't there.
2) -webkit-perspective only affects the children of the element it is applied to, not the element itself. Read the Safari blog on this:
The interesting thing about -webkit-perspective is that it does not
affect the element directly. Instead, it affects the appearance of the
3D transforms on the transformed descendants of that element; you can
think of it as adding a transform that gets multiplied into the
descendant transforms. This allows those descendants to all share the
same perspective as they move around.
3) It's awesome that you posted a fiddle, but since this is a CSS problem, for future reference it would have been a lot easier if you cleaned out all the javascript, and used one set of browser prefixes only. Help us help you!
4) What you probably want to use is an animation. Here's a highly modified version of your fiddle that works on hover:
http://jsfiddle.net/RFMxG/4/
5) If javascript is your skill set, and you're at all concerned about browser compatibility (which of course you are!), I highly recommend doing these kinds of animations with jstween.
Right, so the solution was actually due to the fact the transform origin needs to be set prior to the animation starting (it cannot be set at the same time the -webkit-transform property is set).
I've updated the fiddle to demonstrate this now works correctly.
http://jsfiddle.net/RFMxG/5/
It's clear that setting opacity to anything but 1 hurts performance on the ipad.
Webkit animations performance on IPad
I am working on a feature that would benefit immensely from setting the opacity of some elements to less than 1.
The problem is that as I scroll down the ipad, any element which has opacity less than 1 isn't displayed. Only when scrolling stops are the elements rendered properly. Can anyone think of a trick to achieve the same affect that I need?
The same thing happens with positioned elements on the iPad. You could probably overlay the thing you are trying to make opaque with a semi-transparent PNG image. It's hard to say how difficult this would be without seeing your markup, but it probably wouldn't be too bad.
Solution 1:
If you are using a solid background you could try overlaying a transparent png.
solution 2:
or you could create a image sprite png. or even jpg really depends on your background. you would add an overlay say in photoshop instead of actually over it and would be swapping background positions.
solution 3:
having a png with transparency background width 100% height 100%.
<div id="bg"></bg> <-- set z-index to 1
<div class="element dead"></div><-- set z-index to 0
<div class="element alive"></div><-- set z-index to 3
The dead elements will show up behind the bg looking as if they had faded out.
See this in action here: http://jsfiddle.net/cma9B/2/
Also depending on if you need the user to interact with the elements makes a difference which route you will want to go.
http://jsfiddle.net/nicktheandroid/5Ytnj/
When I add -webkit-backface-visibility: hidden; to the .circ element, it causes it to stay pixelated even after the animation is complete.
I'm wondering if there's a way to get it to not pixelate while animating.
I've viewing it in the dev version of Google Chrome.
Okay so i think i've come up with a work around;
essentially; don't use "scale". use "scale3d" and have it setup so that the largest you want the image is scale3d(1,1,1).
Here is an example with the circle thing you had in there. I changed the scale to 5, because i didn't want to put 0.222222222222222222222222222222222 into the scale3d func...
[edit] So i tried the jsfiddle demo again, on a computer with no hardware acceleration, and the pixelation effect was gone. So it seems that it's the same problem as with scale3d where it converts it into a texture and then scales it. you can do as in the circ3 div here.