I am trying to animate svg path object with css animation. My goal is to animate CSS property transform: translateX(0%) to transform: translateX(50%). Please check jsFiddle.
Two things here:
Notice, SVG path object width is 2 times larger than parent SVG.
If you change percentage in CSS to px, animation is running as expected.
Related
I've included an inline svg in the html. My goal is to identify the individual stars and apply a "twinkle" effect as a keyframe.
I noticed there are inline style attributes for its transform properties.
I changed the transform-origin of the individual star, #star to transform-origin: 50% 50% and added a transform: scale(1.2), just to test a simple scaling effect.
For some reason, I don't see the transform being applied when I hover over #star element. The star disappears on hover.
Heres a link to my codepen
Apply the transform:scale() to #star:hover polygon this should change the size of the polygons within the group.
#star:hover polygon{
transform: scale(1.2)
}
CODEPEN
i trying to apply a margin in amcharts .amcharts-category-axis svg element, but it not works in css
<g class="amcharts-category-axis" transform="translate(0,20)" visibility="visible">...</g>
if i apply transform="translate(50,20)" fix my problem, but in css
.amcharts-category-axis{
transform: translate(0, 20);
}
doesn't works
You need to specify a unit when using CSS. Try transform: translate(50px, 20px). Note that this doesn't work on IE 11 and Edge. You'll have to stick to attributes for IE/Edge or, preferably, setting your own margins using the chart's margin properties.
Demo using translate(59px, 0px)
What's wrong with my CSS3 newbie animation? It won't go all the way across the screen even when I set it to from 0px, to 100%.
https://jsfiddle.net/VCUgrad08/38grd6co/
Unfortunately the image won't show up but you can see the fallback text moving to get the gist of what's wrong.
<object id="pandaMove" data="http://svgshare.com/i/gY.svg" type="image/svg+xml">This is an image</object>
to {transform: translateX(100%);} in the keyframe rules makes the svg container move by 100% of it's own width, not that of the parent element...
If you know the width of the svg element, you can use this type of rule (in my example the width would be 320px):
#keyframes pandaRight {
from {left: 0px;}
to {left: calc(100% - 320px);}
}
https://jsfiddle.net/7t6gcfr0/
I've create a svg image, now the problem is i'm trying to animate that image with css3 animations
#keyframes animate {
from {transform: scale(1);}
to {transform: scale(10);}
}
but the image is blurring during the animation, and immediately become fine after the animation.
Is there any solution for not blur the image during the animation?
This happens with all elements regardless of whether or not they're SVG. The browser doesn't recalculate the dimensions and such until the element is done animating.
You can try forcing the GPU to render it by adding translate3d(0,0,0) or translateZ(1px), but I am unsure if this will actually help the rendering.
As such, you should set the initial value to the smaller one and animate to scale(1) instead. In your case the smaller value would be scale(.1)
You can try animating width and height instead of transform.
#keyframes zoomSize {
from { width: 30px; height: 30px; }
to {width: 300px; height: 300px; }
}
Here's a running example.
I have created a simple SVG animation where it animates on click using a simple CSS transition and transform (see here: http://jsfiddle.net/T9hsW/1/).
I want the SVG to scale with the user's font-size so I sized it in ems. However, I noticed that if I increase the font-size of my browse using cmd-+ then when I click the SVG, the transform-origin appears to be the old transform origin, not the new one, even though I have used % to set the origin:
svg {
width: 4em;
height: 4em;
}
.arrow, .arrows {
transform-origin: 50% 50%;
...
}
This is the desired output after clicking:
This is what it looks like if you increase the browser font size. Note that it is clearly off-center, probably using the original coordinates:
Is there anything I can do about this?