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);
}
}
Related
I have created a rotating linear-gradient background. Unfortunately, as it rotates, in the corners you can see white screen. I am trying to get it so the color fills the viewport with nothing visible but the rotating gradient.
Here is my code so far (done on codepen.io):
HTML
<div class="fade"></div>
CSS
body {
margin: 0;
}
.fade {
background-image: linear-gradient(0deg, red, blue, red);
height: 100vh;
width: 100%;
animation: revolve 1s infinite linear;
}
#keyframes revolve {
from {
transform: scale3d(1,1,1) rotateZ(0deg);
}
to {
transform: scale3d(1,1,1) rotateZ(360deg);
}
}
I originally had the scale3d as (2,2,1). Changing it to (1,1,1) didn't solve anything. I have also tried changing the height and width to greater than 100wv and setting a background-position of center center, but neither of those worked.
Here is the codepen.
Use the vmax unit like below to create a big overflowing square:
body {
margin: 0;
overflow:hidden;
}
.fade {
background-image: linear-gradient(0deg, red, blue, red);
position:absolute;
height: 200vmax;
width: 200vmax;
left:50%;
top:50%;
transform:translate(-50%,-50%);
animation: revolve 1s infinite linear;
}
#keyframes revolve {
to {
transform:translate(-50%,-50%) rotate(360deg);
}
}
<div class="fade"></div>
You can simplify with a pseudo element:
html::before {
content:"";
background-image: linear-gradient(0deg, red, blue, red);
position:fixed;
top:-50vmax;
bottom:-50vmax;
left:-50vmax;
right:-50vmax;
animation: revolve 1s infinite linear;
}
#keyframes revolve {
to {
transform: rotate(360deg);
}
}
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 am trying to move a skewed div from top left off screen, through the screen, to bottom right off screen. The effect I am trying to get is that it looks like a parallelogram appears from somewhere up and to the left, and it slowly moves through the screen in a downwards and rightwards motion and then off the screen to the bottom.
Right now I have this index.html:
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="div1" id="one"></div>
</body>
</html>
And here is my index.css:
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200px, -1000px);
transform: skew(20deg);
}
100% {
transform: translate(250px, 750px);
}
}
I have two problems:
First, it is changing shape from the skewed shape (looks like a "\") to a unskewed one (looks like a "|"). If I try to add a skew in my 100% keyframe, then it does not move any more, it just stays in the same place. I tried both orders skew then translate / translate then skew.
Second, it does not seem to start above the screen, but right in the middle of the screen.
Appreciate any advice.
You were overwriting the transform property. Transform accepts multiple styles, separated by spaces. If you add the transform property twice, it will overwrite the first one. Just put the translate and skew on the same line both times and it will work.
For the second part, translate it by percents (relative to itself) rather than pixels (absolute measures).
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200%, -200%) skew(20deg);
}
100% {
transform: translate(250px, 750px) skew(20deg);
}
}
<div class="div1" id="one"></div>
I'm trying to create an animation that simulates a "cut from rope" sort of effect.
Picture an object hanging from two ropes. First, the left one is cut, and a bit after the right one is then cut. I have got pretty close to the desire effect, but my animation isn't as smooth as I would like.
You can see that the object sort of bounces back up, which I tried to minimize by translating the entire object down.
My question is, is there a better way to achieve this effect, or any ways to improve my animation?
HTML
<div id="box"></div>
<div id="bottom"></div>
CSS
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0deg);
transform: rotateZ(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
transform: translateY(50px)
}
#bottom {
width: 600px;
height: 2px;
background: red;
margin-top: -50px;
}
#keyframes ropecut {
0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
70% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
100% {transform: rotateZ(0);transform-origin: top left;animation-timing-function: ease-in-out;transform: translateY(50px)}
}
Link to JS Fiddle
Try this, I basically just took out the 70% bit of the keyframe and then removed the rotateZ in the 100% sequence. That will keep the bottom left corner where it should stay.
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
transform: translateY(50px)
}
#bottom {
width: 600px;
height: 2px;
background: red;
margin-top: -50px;
}
#keyframes ropecut {
0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
100% {animation-timing-function: ease-in-out; transform-origin: top right;}
}
<div id="box"></div>
<div id="bottom"></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>