I'm looking to create a simple pulsing animation on a circle svg element. I'm using a transform: scale(..,..) animation but for some reason it's moving the entire circle within its container rather than simply scaling the element itself.
Here's the animation:
animation: pulsate 2s infinite linear;
#keyframes pulsate {
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
And here's an example (including the same animation applied to a div which produces the desired result):
http://codepen.io/anon/pen/jWqVyb
Any ideas on how to create this effect? The circle may be positioned anywhere within the svg and it needs to maintain this position.
You need to change the transform-origin property value.
In this case, you would use the value 50% 50%:
Updated Example
.beacon {
height: 100px;
width: 100px;
border-radius: 50%;
background: #fff;
box-shadow: 0px 0px 2px 2px #fff;
animation: pulsate 2s infinite linear;
transform-origin: 50% 50%;
}
By default, the value is 0 0 on svg elements. Reference:
CSS Transforms Module - 8 The transform-origin Property
The default value for SVG elements without associated CSS layout box is 0 0.
You need to add proper transform-origin to your circle:
circle {
fill: #fff;
transform-origin: 50px 50px;
}
transform-origin in HTML has default value 50% 50%; but not in SVG.
Related
I am trying to animate a pie chart transitioning from x% full to y% full. It isn't going well.
The issue is that the animation shows a discrete change: It changes from 66% full to 33% full to 0% full.
A similar animation is continuous: It loads from 1% to 2% to 3% smoothly.
I have a fiddle showing the bug, which is probably me not understanding something about the tool I'm using:
Fiddle <= in the fiddle, the "good" animation is on top of the broken one, so you'll have to delete the parent and child div and reload. But, its there.
My goal is for the pie chart to smoothly animate from x% to y% loaded. It could go from half full to 1/4 full, or 1/9 full to 7/8 full. I just want it to be smooth.
html:
<div
class="pie border border-midnight "
/>
<div class="parent"><div class="filler child" /></div>
css:
.filler {
background-color: blueviolet;
animation-name: tester;
animation-duration: 2s;
transition-timing-function: linear;
}
#keyframes tester {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.pie {
width: 22px;
height: 22px;
border-radius: 50%;
animation-name: progress-pie;
animation-duration: 2s;
transition-timing-function: ease;
}
#keyframes progress-pie {
0% {
background-image: conic-gradient(#d8d2c3 0deg 150deg, black 150deg 360deg);
}
100% {
background-image: conic-gradient(#d8d2c3 0deg 250deg, black 250deg 360deg);
}
}
I am trying to create an animation background in a small div, but chrome is getting me unknown property name for the #keyframes all time, and I have the gradient, but I am unable to sho the animation.
#keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100%}
}
#-webkit-keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100% }
}
.labelSincroAlert {
text-align: center !important;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background: -webkit-linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
background-size: 600% 100%;
animation: gradient 16s ease infinite;
-webkit-animation: gradient 16s ease infinite;
animation-direction: alternate;
}
I'm using cuba framework and scss for this, It's important?
Here in the inspector is where I get the error
This only happends to me because I am doing an extension from the cuba-platform hellium theme. I don't know how to solve it.
The problem is I was using helium-ext.scss, and in this cases you have to use helium-ext-defaults.scss. It was inded related with cuba-framerwork and his theme. To solve it just put you #keyframe inside of helium-ext-defaults.scss and the rest of the code on helium-ext.scss.
In this keyframe animation, everything that I want to animate works, but when you remove the background colour change from the animation, it breaks the border-radius animation. I know the border-radius is actually applying but because we're using scale instead of changing the actual height and width of the div it's not visible. But what I don't understand is why adding in the background change to the animation changes this and allows the border-radius animation to do what you expect it to do.
<div class="square"></div>
.square {
width: 350px;
height: 350px;
margin: 200px auto;
background: #41A9F0;
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: scale(0.2) rotate(0deg);
border-radius: 0;
}
50% {
transform: scale(2) rotate(180deg);
border-radius: 50%;
background:#5ABE8A;
}
100% {
transform: scale(0.2) rotate(360deg);
}
}
I have water animation. I want two keyframes to have cubic-bezier(1,.41,.74,.45) and third one to have cubic-bezier(.38,.8,.68,.09). In other words, I need waves to loop first 2 times same way, and on last one to behave differently. Overall, there are 3 keyframe loops in animation. Is there a way to specify different cubic-beziers for different keyframes or apply different animations for same elements?
Pure CSS. No additional elements.
This is example for the first part of animation and this is for the second part.
I am not sure what is your requirement.
But about your question
Is there a way to specify different cubic-beziers for different keyframes
Yes, it's possible
#keyframes ripple {
0% {
transform: scale(1);
animation-timing-function: cubic-bezier(.38,.8,.68,.09);
}
50% {
transform: scale(0.27);
animation-timing-function: cubic-bezier(1, .41, .74, .45);
}
100% {
transform: scale(1);
}
}
.wave {
width: 100px;
height: 100px;
border: solid 4px red;
border-radius: 50%;
animation: ripple 2s infinite;
}
<div class="wave"></div>
I am trying to animate the border-width of a circle to give it a pulsating effect. So let's say we define this circle like this:
.bubble {
width: 100px;
height: 100px;
border-radius: 50%;
background: #facf35;
border: solid 14px #fff0cf;
-moz-animation: interaction_bubble 2s infinite;
-webkit-animation: interaction_bubble 2s infinite;
-o-animation: interaction_bubble 2s infinite;
}
And then I define the animation, which changes the "thickness" of the border (e.g. for Firefox)
#-moz-keyframes interaction_bubble {
0%{border: solid 14px #dfe4c7;}
50%{border: solid 24px #dfe4c7;}
100%{border: solid 14px #dfe4c7;}
}
The problem here is, that the whole object itself moves down and to the right due to the change of the size. How can i prevent it from doing that? I want that the object stays at the same place and just the border resizes. Can you help me with that?
Here's a jsFiddle showing the problem: http://jsfiddle.net/Oinobareion/rRTgk/
Thanks in advance!
Instead of changing the border size, just try to apply a scale transformation, e.g.
#-moz-keyframes interaction_bubble {
0%{ -moz-transform: scale(1); }
50%{ -moz-transform: scale(1.4); }
100%{ -moz-transform: scale(1); }
}
example jsbin (for firefox only): http://jsbin.com/ejejet/3/edit
If you want to mantain instead your original animation try to also add
-moz-box-sizing: border-box;
to the style of your element: this make possible to change the border width without affecting the size and the position of the element itself.
Example jsbin (for firefox only): http://jsbin.com/ejejet/4/edit
As a side note your animation could be simplified like this:
#-moz-keyframes interaction_bubble {
0% {border-width: 14px }
50% {border-width: 24px }
100% {border-width: 14px }
}
since you're changing only the border-width property
I did it now with 3 separate elemets, like this. It's a little bit more complicated, but at least it works :-) 2 Elements with the same position lie behind the first circle and are resized.
http://jsfiddle.net/Oinobareion/rRTgk/6/
<div class="bubble position_bubble"></div>
<div class="bubble_animated position_bubble_animated"></div>
<div class="bubble_animated2 position_bubble_animated2"></div>