So i got this css animation with 5 of this circles rotating between some text;
(each of them is diffrent in size)
#circle .circle1{
position: absolute;
top: 1330px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #5E0DAC;
border-right: 20px solid transparent;
border-bottom: 20px solid #5E0DAC;
border-left: 20px solid transparent;
animation-name: circle1;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle2{
position: absolute;
top: 1380px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 400px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #B90091;
border-right: 20px solid #B90091;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
animation-name: circle2;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle3{
position: absolute;
top: 1480px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 200px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #5E0DAC;
border-right: 20px solid transparent;
border-bottom: 20px solid #5E0DAC;
border-left: 20px solid transparent;
animation-name: circle1;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle4{
position: absolute;
top: 1430px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
border-radius: 50%;
display: inline-block;
border-top: 20px solid #5E0DAC;
border-right: 20px solid #5E0DAC;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
animation-name: circle1;
animation-duration: 13s;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
}
#circle .circle5{
position: absolute;
top: 1530px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
border-radius: 50%;
display: inline-block;
background-color: #B90091;
}
#keyframes circle2{
0% {transform: rotate(-360deg)}
}
#keyframes circle1{
0% {transform: rotate(360deg)}
}
<html>
<div id="circle">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</html>
What would be the easiest way to make this animation responsive?
i would have to edit every pixel for the height and width in the media queries for that.
Asking if there is a easier way.
Cheers
This might not be a full answer to your problem as its not 100% responsive but its a starting point to make it easier with the media queries.
The code is more classed based, so for example each ring has a purple or a pink class to get its color, and all the common elements between the circles are now in a single class.
The differences, such as animation timing and position are now against the individual ids for each ring and more importantly the rings are based on percentages relative to each other. The outer ring which I took as 100% at 500px was used as the basis, and the positional elements were taken relative to that.
I added a new container div to hold and position the circle animation as you see fit. It will attempt to push itself out to fit the dimensions of that space, so you can adjust its height and width in media queries as you need to. You can also adjust things like the border width in the media queries to make it look more relative to the overall size.
To be honest if I was to tackle an animation like this from scratch I would look at an SVG based solution.
.circleHolder {
height: 540px; /* main ring is 500px + the 40px (for the border #20px) */
width: 540px; /* border-width:20px; /* media queries should target this value and the height */
top: 200px;
left: 200px;
position:absolute;
}
#circle {
height: 100%;
width: 100%;
position:relative;
}
.circle {
border-radius: 50%;
display: inline-block;
margin: 0 auto;
text-align:center;
animation-iteration-count: infinite;
animation-delay: -1s;
animation-timing-function: linear;
position:absolute;
border-style: solid;
border-width:20px; /* media queries should target this value */
}
.purpleCircle {
border-top-color: #5E0DAC;
border-right-color: transparent;
border-bottom-color: #5E0DAC;
border-left-color: transparent;
}
.pinkCircle {
border-top-color: #B90091;
border-right-color: #B90091;
border-bottom-color: transparent;
border-left-color: transparent;
}
.circle1{
height: 100%;
width: 100%;
animation-name: circle1;
animation-duration: 18s;
}
.circle2{
top: 10%;
left: 10%;
height: 80%;
width: 80%;
animation-name: circle2;
animation-duration: 8s;
}
.circle3{
top: 30%;
left: 30%;
height: 40%;
width: 40%;
animation-name: circle1;
animation-duration: 6s;
}
.circle4{
top: 20%;
left: 20%;
height: 60%;
width: 60%;
animation-name: circle1;
animation-duration: 13s;
}
.circle5{
top: 40%;
left: 40%;
height: 20%;
width: 20%;
background-color: #B90091;
}
#keyframes circle2{
0% {transform: rotate(-360deg)}
}
#keyframes circle1{
0% {transform: rotate(360deg)}
}
<html>
<div class="circleHolder">
<div id="circle">
<div class="circle circle1 purpleCircle"></div>
<div class="circle circle2 pinkCircle"></div>
<div class="circle circle3 purpleCircle"></div>
<div class="circle circle4 purpleCircle"></div>
<div class="circle circle5 pinkCircle"></div>
</div>
</div>
</html>
Thanks for the help, this really helped me!
So I figured it out, I just had to give the parent element #circle a position: relative; atribute and so I just have to align this one element.
#circle{
position: relative;
bottom: 750px;
Related
https://codepen.io/jenny0515/pen/MWOMWEy
If you open the code pen link, you'll see that if you hover over one of the cubes that are rotating, it will pause but the other cubes will continue to rotate; and when you move the cursor from the cube, it will rotate again but in a different position to the one it started with.
What I'm trying to do, however, is to pause all of the cubes by only hovering on one of the cubes, and when I move it away from the cube it was on, it should begin to rotate again from where it paused.
Code Preview:
.cube:hover{
width: 100px;
height: 100px;
animation-play-state: paused;
}
I'm only using the :hover selector but maybe there's another option in CSS to accomplish this instead of in JavaScript?
Because sibling selectors are rather limited in their usage in these cases it's a lot easier to work with parents.
I could not reproduce your rotation problem, works fine here (Chrome).
.div{
position: absolute;
width: 500px;
height: 500px;
border: 3px solid chartreuse;
border-radius: 300px;
left: 500px;
top: 100px;
}
.circle{
position: absolute;
width: 30px;
height: 30px;
border: 3px solid chartreuse;
border-radius: 20px;
left: 230px;
top: 230px;
}
.cube{
position: absolute;
width: 50px;
height: 50px;
border: 5px solid violet;
left: -180px;
top: -15px;
transform-origin: 200px;
animation: rotate 6s linear infinite;
}
.stop_anim/*:nth-child(n+1)*/:hover .cube{
width: 100px;
height: 100px;
//cursor: pointer;
/*animation: float 3s ease-in-out alternate infinite;
transform: translatey(0px);*/
animation-play-state: paused;
}
.cube:nth-of-type(2){ //wrong IF space before nth;
animation-delay: 2s;
border-color: aqua;
}
/*.cube:nth-of-type(2):hover{
width: 100px;
height: 100px;
cursor: pointer;
animation-play-state: paused;
}*/
.cube:nth-of-type(3){
animation-delay: 4s;
border-color: aquamarine;
}
/*.cube:nth-of-type(3):hover{
width: 100px;
height: 100px;
cursor: pointer;
animation-play-state: paused;
}*/
#keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
<div class="div">
<div class="circle">
<div class="stop_anim">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
</div>
</div>
I've spent the past hour trying to find a way to get a sliding animation from bottom to top using only CSS. It's supposed to be a test tube with fluid filling it. (This is what I want it to look like), however during the animation it overflows around the edges at the bottom and doesn't sit flush (like this).
HTML & CSS:
.testTube #border {
width: 40px;
height: 150px;
margin-top: 15px;
background-color: white;
border: 2px solid black;
border-radius: 5px 5px 25px 25px;
position: absolute;
}
.testTube #fluidLeft {
width: 20px;
height: 100px;
margin-left: 2px;
background-color: #ff007f;
border-radius: 0% 0% 0% 25px;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.testTube #fluidRight {
width: 20px;
height: 0px;
margin-left: 22px;
background-color: #ff1a8c;
border-radius: 0% 0% 25px 0%;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes fluid {
from {
height: 0px;
margin-top: 167px;
}
to {
height: 100px;
margin-top: 67px;
}
}
<div class="testTube">
<div id="border"></div>
<div id="fluidLeft"></div>
<div id="fluidRight"></div>
</div>
You can move the #fluidLeft and #fluidRight divs into the #border div. That way, you can add "overflow: hidden" on to the border div (now the parent) which will make it so the fluid divs (now children of the border div) don't overlap outside of the border. I also tweaked the "margin-left" on the fluids by 2px so it was centered in the tube.
.testTube #border {
width: 40px;
height: 150px;
margin-top: 15px;
background-color: white;
border: 2px solid black;
border-radius: 5px 5px 25px 25px;
position: absolute;
overflow: hidden;
}
.testTube #fluidLeft {
width: 20px;
height: 100px;
background-color: #ff007f;
border-radius: 0% 0% 0% 25px;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.testTube #fluidRight {
width: 20px;
height: 0px;
margin-left: 20px;
background-color: #ff1a8c;
border-radius: 0% 0% 25px 0%;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes fluid {
from {
height: 0px;
margin-top: 167px;
}
to {
height: 100px;
margin-top: 67px;
}
}
<div class="testTube">
<div id="border">
<div id="fluidLeft"></div>
<div id="fluidRight"></div>
</div>
</div>
Demo on CodePen
<pre>
.parent
border: 1px solid tomato
height: 300px
margin: 0 auto
margin-top: 30px
width: 80%
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
.box-1
background-color: lightblue
right: 60vw
animation-duration: 6s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
.box-2
background-color: lightgreen
right: 70vw
animation-duration: 8s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
</pre>
As you can see in the demo, the animation speed of the cube is slowing down the closer it gets to the bottom.
I'd like to make animation the same speed during the fall.
Thank you.
The default animation-timing-function in CSS is ease - accelerate in the start, slow after the middle. You need a linear timing function, that has a constant speed.
Change the box timing function to linear (pen):
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
animation-timing-function: linear
You can use animation function linear. Have a look at the snippet below:
.parent {
border: 1px solid tomato;
height: 300px;
margin: 0 auto;
margin-top: 30px;
width: 80%;
}
.box {
width: 50px;
height: 50px;
position: absolute;
animation-name: falling;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box-1 {
background-color: lightblue;
right: 60vw;
animation-duration: 6s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
.box-2 {
background-color: lightgreen;
right: 70vw;
animation-duration: 8s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
<div class="parent">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
Hope this helps!
This custom graphic need to fill with three different colors. Every color will be filled with 1-100%. So blue color will be filled from leg to head ( 1-100% ), red color will be filled from bottom of the head to top of the head ( 1-100% ) and so the orange color. Can this possible using svg / canvas or any other way?
CSS animation method
Segment the three different color sections with different divs. Position it in the HTML according to the priority or give it z-index regardless of the markup.
Sub divide the color sections for creating the holder and filling up background. Although this can be created with :before and :after I have used nested divs.
Create a fill-up key frame animation which transitions from 0% height to 100% height. More info about the filling up animation can be found in these answers: CSS Wipe up animation
The animation-delay needs to be calculated before, according to the number of shapes you have. If the first shape has a animation duration of 2s, give the next shape animation-delay of 2s which creates a sequential effect.
Manipulate the border-radius, position, width and height values to get the desired shape and position.
Edit: Updated with a status indicator in Codepen
Codepen Demo
body {
background: lightgray;
}
/* Red Filler */
.red-filler {
background: lightgray;
border-radius: 50%;
width: 200px;
height: 200px;
border: 10px solid white;
position: relative;
overflow: hidden;
}
.red-liquid {
width: 100%;
position: absolute;
bottom: 0;
animation: fill-up 6s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #E63B44;
}
/* Orange Filler */
.orange {
z-index: -1;
position: absolute;
}
.orange-filler-1 {
background: lightgray;
border-radius: 50%;
width: 200px;
height: 200px;
border: 10px solid white;
position: relative;
top: -50px;
overflow: hidden;
}
.orange-liquid-1 {
width: 100%;
position: absolute;
bottom: 0;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
animation: fill-up 3s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-delay: 3s;
background: #EC952E;
overflow: hidden;
}
.orange-filler-2 {
background: lightgray none repeat scroll 0 0;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
border-color: white;
border-image: none;
border-style: none solid solid;
border-width: 0 10px 10px;
height: 100px;
left: 50px;
overflow: hidden;
position: relative;
top: -74px;
width: 100px;
}
.orange-liquid-2 {
animation: fill-up 3s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #EC952E;
position: absolute;
bottom: 0;
width: 100%;
}
/* Blue Filler */
.blue {
z-index: -2;
position: absolute;
top: 40px;
}
.blue-filler-1 {
background: lightgray none repeat scroll 0 0;
border-radius: 50%;
height: 250px;
overflow: hidden;
position: relative;
width: 260px;
left: -20px;
top: -10px;
}
.blue-liquid-1 {
width: 100%;
position: absolute;
bottom: 0;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-delay: 4s;
background: #566EB1;
overflow: hidden;
}
.blue-filler-2 {
background: lightgray none repeat scroll 0 0;
border-radius: 50%;
height: 275px;
left: -25px;
overflow: hidden;
position: relative;
top: -100px;
width: 275px;
}
.blue-liquid-2 {
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #566EB1;
position: absolute;
bottom: 0;
width: 100%;
animation-delay: 2s;
}
.blue-filler-3 {
background: lightgray none repeat scroll 0 0;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
height: 110px;
left: 35px;
overflow: hidden;
position: relative;
top: -125px;
width: 150px;
}
.blue-liquid-3 {
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #566EB1;
position: absolute;
bottom: 0;
width: 100%;
}
/* Container for centering */
.container {
margin: 0 auto;
width: 500px;
margin-top: 50px;
}
/* Animation Keyframe */
#keyframes fill-up {
0% {
height: 0;
}
100% {
height: 100%;
}
}
<div class="container">
<!-- Red container -->
<div class="red">
<div class="red-filler">
<div class="red-liquid"></div>
</div>
</div>
<!-- Orange container -->
<div class="orange">
<div class="orange-filler-1">
<div class="orange-liquid-1"></div>
</div>
<div class="orange-filler-2">
<div class="orange-liquid-2"></div>
</div>
</div>
<!-- Blue container -->
<div class="blue">
<div class="blue-filler-1">
<div class="blue-liquid-1"></div>
</div>
<div class="blue-filler-2">
<div class="blue-liquid-2"></div>
</div>
<div class="blue-filler-3">
<div class="blue-liquid-3"></div>
</div>
</div>
</div>
The HTML
<div id='loader'>
<div id='loaderLargeSlice' class='loaderSlice'>
<div class='arc'></div>
<div class='arc'></div>
<div class='arc'></div>
</div>
</div>
The CSS
#loader{
position: relative;
width: 100px;
height: 100px;
margin: 14px;
border-radius: 50%;
background: none;
}
.loaderSlice
{
position:absolute;
display:block;
opacity: 0.5;
}
#loaderLargeSlice
{
height: 100px;
width: 100px;
animation: spin 4s linear 0s infinite forwards;
-webkit-animation: spin 4s linear 0s infinite forwards;
}
.arc
{
position: absolute;
top: -14px;
left: -14px;
width: 100%;
height: 100%;
background: none;
border: 14px solid rgba(0,0,0,0);
border-top-color: black;
border-radius: 50%;
}
.arc + .arc
{
transform: rotate(70deg);
-webkit-transform: rotate(70deg);
}
.arc + .arc + .arc
{
transform: rotate(140deg);
-webkit-transform: rotate(140deg);
}
The Problem
Firefox shows ragged edges
Anyone know of a fix?
Answering as unfixable. See #Eevee's comment on the main post.