I want to animate a circle
#keyframes animation {
0% {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
}
.circle {
animation: animation 1s ease-in;
fill: #ff0000;
}
<svg class="parent" width="500px" height="500px" viewBox="0 0 500 500">
<circle class="circle" r="150" cx="150" cy="150"></circle>
</svg>
The animation for opacity succeeded while the transform(translate) animation faild.
Any ideas on how to solve this?
IE 11 may supports the transform attribute, but it doesn't recognize the CSS style (and therefore also no CSS stylesheets or animations).
Will not work in IE11:
<circle style="transform:translate(50%, 50%)"></circle>
Will work in IE11:
<circle transform="translate(50%, 50%)"></circle>
I have four solutions for you:
Go the hard way: Animate the changes with jQuery manually by using var circles = jQuery('.circle'); to get the circles, circles.attr('transform', 'translate('+n+'%, '+n+'%)'); to set the attribute and jQuery.animate(...) to get the animation steps.
Handle the animation with width and height attributes.
Make the animation different if IE11.
Drop your IE11 support for that feature or your hole site.
The IE browser does not support CSS transforms on SVG elements, more detail information, please check this article.
As a workaround, you could try to display the circle using div, instead of SVG. Code like this:
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0% {background-color:red; left:0px; top:0px;-webkit-transform: translate(0, 0); transform: translate(0, 0);opacity: 0;}
100% {background-color:red; -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%);opacity: 1;}
}
</style>
</head>
<body>
<div></div>
</body>
The output as below (use IE 11 browser):
Related
I am able to make this using css by simply applying styles to a div and applying keyframes for animation
the code looks something like this
.loader {
margin: 10px auto;
font-size: 5px;
position: relative;
text-indent: -9999em;
border-right: 0.75em solid #E0E3E9;
border-bottom: 0.75em solid #E0E3E9;
border-left: 0.75em solid #6B04A8;
border-top: 0.75em solid #6B04A8;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
border-radius: 50%;
width: 30px;
height: 30px;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
<div class="loader">Loading...</div>
so basically applied a two sets of border colours and a border-radius of 50% to make it look like a circle and applied transform on it.
I need to do the same in a svg , can someone point me in the right direction from where to start , thanks in advance
In this case I'm using 2 circles one over another. The first one (the base) has a silver stroke. The second one has a purple stroke and stroke-dasharray = "125.5" meaning that there are strokes of 125.5 and gaps the same size. Also 125.5 represents half total length of the circumference.
The center of the circle is in the origin of the svg canvas (0,0) Please observe the viewBox of the svg element: x:-50 y:-50 width:100 height:100
svg{width:50px;display:block; margin:0 auto;}
#theCircle{animation: load8 1s linear infinite;}
#keyframes load8 {
to {
transform: rotate(-1turn);
}
}
<svg viewBox="-50 -50 100 100">
<circle r="40" fill="none" stroke="silver" stroke-width="10" />
<circle id="theCircle" r="40" fill="none" stroke="rebeccapurple" stroke-width="10" stroke-dasharray = "125.5" />
</svg>
I have an svg <path> that I want scaled on mouse hover. The scaled path should be centered on top of its original location. I have read other similar posts but could not get it done.
I tried using transform-origin: 50% 50%;, transform-origin: 0 0;, and transform-origin: center; and also tried removing transform-origin all throughout, but none of them works as intended since the scaled path has an offset of several pixels:
path {
fill: #f00
}
path:hover {
fill: #000;
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform-origin: 50% 50%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 881 571" pointer-events="fill" fill="none" fill-opacity="1">
<path d="M447 263h1-1 1v-1 1h1-1 1-1 1v1h1-1 2v1h1v1h-1 1-1v1h1v1h1-1v1h-1v1-1 1h-1v1h-1v3h-1v-1h-2v-1h-1v-1h-2v-2h-1v-3h-1v-1h1-1 1v-1h1v-2h1-1v1-2 1h1v1h1v-1h1v1h1z"/>
</svg>
Your SVG artbox seems enormous, and I believe this is part of the issue. I tried cleaning it up a bit to fit the content of the SVG, and I wrapped the element inside of a div.
Here's the SVG with a more proportionate artbox:
svg {
display: block;
width: 100%;
height: auto;
}
div {
fill: #f00;
width:127px;
height:150px;
margin-left: 50px;
margin-top: 50px;
}
div:hover {
fill: #000;
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform-origin: 50% 50%;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg"><path d="M65.5 23.583h10.583H65.5h10.583V13v10.583h10.584-10.584 10.584-10.584 10.584v10.584H97.25 86.667h21.166V44.75h10.584v10.583h-10.584 10.584-10.584v10.584h10.584V76.5H129h-10.583v10.583h-10.584v10.584-10.584 10.584H97.25v10.583H86.667V140H76.083v-10.583H54.917v-10.584H44.333V108.25H23.167V87.083H12.583v-31.75H2V44.75h10.583H2h10.583V34.167h10.584V13H33.75 23.167v10.583V2.417 13H33.75v10.583h10.583V13h10.584v10.583H65.5z"/>
</svg>
</div>
Hope it helps!
Animation i've created works fine on Chrome and Firefox, but is pixelated on Safari (version 10.1.1) and IE11.
Tried using translateZ() / translate3d() so the gpu can render the animations but nothing happened.
I've avoided using top, left props. Had an idea of using the will-change prop but it doesn't take animation as a value.
Removing the border radius would fix the rendering issue.
Can someone explain the cause of this and is there a solution to fix this issue?
https://codepen.io/imrdev/pen/awBZOW
html ->
<div class="dot"></div>
css - >
/* KEYFRAME ANIMATION */
#keyframes ease {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(4)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
#keyframes ease2 {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(6)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
.dot {
$scale-duration: 15s;
background-color: black;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
&::before,
&::after {
content: "";
background: red;
width: 7px;
height: 7px;
border-radius: inherit;
opacity:.3;
position: absolute;
transform: translate(0px, 0px);
}
&::before {
animation: ease 5s ease-in-out infinite;
}
&::after {
animation: ease2 5s ease-in-out infinite both $scale-duration/15;
}
}
Thanks :-)
I have not enough reputation so i can't comment yet, so sorry if this doesn't qualify as a proper answer, but have you tried changing the size to something bigger than 7px and use eg scale(1) instead of scale(4)?
if you need to scale the width and height up by 4 or 6, why not just double the original size and scale up by 2 ?
I wouldn't be surprise if safari doesn't really scale the size up, but kinda like "zooms in" and since the original size is just 7 x 7 px it gets pixelated when "zoomed in"
and regarding to the will-change: you wouldn't use "animation" but "transform"
The following code renders a perfect rotating circle in safari, but not in chrome.
<style>
.circle{
height:1000px;
width:1000px;
background-color:#000;
border-radius: 50%;
}
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-webkit-transform-origin: center;
}
</style>
<div class="circle rotating">
</div>
http://jsfiddle.net/p4ban9cs/
It does not renders perfectly, the problem is visible when rotating a big circle, it's like a wiggling circle on chrome.
thank you for help.
Adding an outer element as a wrapper and apply same styling to it, to mask the inner circle rotation as seen in this Fiddle
<div class="overlay">
<div class="circle rotating">Test</div>
</div>
.overlay{
height:1000px;
width:1000px;
box-shadow:0 0 0 10px #000 ;
background:black;
border-radius: 50%;
}
Not sure if I am doing this wrong? Is it possible to animate two properties on a path in an SVG at once? This works as I would expect in Firefox but not on Safari or Chrome.
Example SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="holder">
<path id="ShapeRight" d="M16,20 L21,16.5004951 C21,16.5004951 19.5760225,15.5035698 18.8640337,15.0051072 C17.9093558,14.336738 16,13 16,13 L16,20 L16,20 Z" opacity="0.55" fill="#999"></path>
</g>
</g>
</svg>
Relevant Sass/CSS (obviously prefixes needed in some instances)
#holder {
#ShapeRight {
opacity: 1;
transform: scale(1);
animation: pulseArrow 2s forwards ease-in-out infinite;
transform-origin: 50% 50%;
display: inline-block;
}
}
#keyframes pulseArrow {
0% {
transform: scale(1) translateX(0);
opacity: 0;
}
50% {
transform: scale(2) translateX(0);
opacity: 1;
}
100% {
transform: scale(1) translateX(0);
opacity: 0;
}
}
Here is a reduction on Codepen:
http://cdpn.io/hLFwn
You can see that only the last part of the animation is applied (the opacity). Should both work or is this a limitation to animating SVG with CSS?
So this was strange. I was able to replicate the problem on Chrome but I don't know why it's not applying both properties of animation.
A simple work around is that #ShapeRight has an animation that only does the scaling up and down. #holder then has its own animation that changes the opacity (since opacity affects children). In my test this caused the arrow to grow and shrink and fade in and out.
I know you were trying to get it to work with one animation but for some reason it isn't. I tried several ideas but I couldn't get that one shape to do the transform scale and change opacity in an animation. So I would keep digging but in the mean time the solution I found could be a temporary fix for you.
Here it is: http://codepen.io/Fernker/pen/BjzFt
Well, it turns out this is definitily a browser bug, I opened a ticket on Chromium and WebKit and Chromium have confirmed it: https://code.google.com/p/chromium/issues/detail?id=319407
Thankfully, there is also a simple workaround that they have suggested and that is to add fill in the animation property. For example:
#keyframes pulseArrow {
0% {
transform: scale(1) translateX(0);
opacity: 0;
fill: #fff; /* without this it won't work in Chrome/Safari */
}
50% {
transform: scale(2) translateX(0);
opacity: 1;
}
100% {
transform: scale(1) translateX(0);
opacity: 0;
}
}