I'm trying to create the following effect with on a design: http://i.imgur.com/RIaSA3N.png
I can create a bordered circle fine - but the matter of partially completing the circle is proving difficult. There are a myriad of different ways to do this with Javascript and Canvas, but I can't find a solid way to achieve it in CSS. I don't mind having a number of different classes for different values, but is there an elegant solution available?
Updated: this is very possible using pure CSS3.
(You should be able to open the below demo and customize to your result)
Use #keyframes to animate between the numbers. You'll need to add this.
Below is using #keyframes 'rotate' { for the circular motion.
body { background: #222; }
.circle {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #333;
border-radius: 50%;
}
.inner-circle {
width: 92%;
height: 92%;
background: #222;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 50px solid rgba(255,255,255,0.3);
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid transparent;
-webkit-animation: rotate 1.6s infinite;
animation: rotate 1.6s infinite;
}
#-webkit-keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="circle">
<div class="spinner"></div>
<div class="inner-circle"></div>
</div>
Related
I have the following animation of a ball falling down and bouncing back up:
body {
margin: 0;
padding: 0;
}
.ball {
width: 20px;
height: 20px;
margin: 0 auto;
border-radius: 50%;
background-color: black;
animation: bounce 2s infinite linear;
}
.ground {
display: block;
width: 100%;
border-bottom: 1px solid black;
position: absolute;
top: 100px;
}
#keyframes bounce {
0%,100% {
transform: translateY(0);
}
20% {
background-color: black;
transform: translateY(40px);
}
50% {
background-color: red;
transform: translateY(84px) rotateX(45deg);
}
70% {
background-color: black;
transform: translateY(40px);
}
}
<div class = "ball">
</div>
<div class = "ground">
</div>
As you can see, I tried to make the ball have a "squeezed" effect when it touches the ground. I had to use the translateX to 84px to maintain the touching of the ball with the ground. I got that 84px by trial and error. Is there a formula which I can use to calculate the offset (i.e. 4px in this case)?
The ball is falling at a linear speed, I've tried using ease-in and ease and it didn't work. I've also tried different numbers from cubic-bezier.com. How do I make it so that the velocity increases along with time because of gravitational acceleration and deceleration when it is bouncing back up?
Check solution below if you hate maths 1
Since you are rotating the element 45deg you are having something like this:
What you are looking for is the Green line which you can get with the following formula:
width/2 - X
Where
X = Width/2*cos(45deg)
so you will have Width/2*(1 - cos(45deg)) ~ Width/2*(1 - 0.707)
You can then adjust the percentage value to control velocity. As a side note, you should not get to initial value but a lower value to have a more realistic animation:
body {
margin: 0;
padding: 0;
}
.ball {
width: 20px;
height: 20px;
margin: 0 auto;
border-radius: 50%;
background-color: black;
animation: bounce 2s infinite ease-in;
}
.ground {
display: block;
width: 100%;
border-bottom: 1px solid black;
position: absolute;
top: 100px;
}
#keyframes bounce {
0% {
transform: translateY(0);
}
30% {
background-color: black;
transform: translateY(80px);
}
40% {
background-color: red;
transform: translateY(calc(80px + 10px*(1 - 0.707))) rotateX(45deg);
}
50% {
background-color: black;
transform: translateY(80px);
}
100% {
background-color: black;
transform: translateY(50px);
}
}
<div class = "ball">
</div>
<div class = "ground">
</div>
1 You can also avoid the calculation by simply changing the transform-origin to rotate from the bottom thus the space will be reduced from the top:
body {
margin: 0;
padding: 0;
}
.ball {
width: 20px;
height: 20px;
margin: 0 auto;
border-radius: 50%;
background-color: black;
animation: bounce 2s infinite linear;
transform-origin:bottom;
}
.ground {
display: block;
width: 100%;
border-bottom: 1px solid black;
position: absolute;
top: 100px;
}
#keyframes bounce {
0% {
transform: translateY(0);
}
30% {
background-color: black;
transform: translateY(78px);
}
40% {
background-color: red;
transform: translateY(80px) rotateX(45deg);
}
50% {
background-color: black;
transform: translateY(78px);
}
100% {
background-color: black;
transform: translateY(50px);
}
}
<div class = "ball">
</div>
<div class = "ground">
</div>
If you want to have a non-realistic bounce effect you can try this:
body {
margin: 0;
padding: 0;
}
.ball {
width: 20px;
height: 20px;
margin: 0 auto;
border-radius: 50%;
background-color: black;
animation: bounce 2s infinite linear;
transform-origin:bottom;
}
.ground {
display: block;
width: 100%;
border-bottom: 1px solid black;
position: absolute;
top: 100px;
}
#keyframes bounce {
0%,100% {
transform: translateY(0);
}
35%,65% {
background-color: black;
transform: translateY(40px);
}
45%,55% {
background-color: black;
transform: translateY(75px);
}
50% {
background-color: red;
transform: translateY(80px) rotateX(45deg);
}
}
<div class = "ball">
</div>
<div class = "ground">
</div>
I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
You are using transform with translation in order to center your element then you are overriding the transform with the rotation which create the issue. Instead you can adjust the top/left values in order to center and avoid using transform then you will have the needed rotation:
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 55px);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 60px);
left:calc(50% - 60px);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
You can also simplify your code by using pseudo elements like this:
* {
box-sizing:border-box;
}
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto;
background: black;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
background:radial-gradient(circle at center, grey 50px,transparent 51px);
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:before,
.circle:after {
content:"";
border-radius: 50%;
position: absolute;
transition: 1.5s all ease-in-out;
border: 2px solid white;
}
.circle:before {
top:0;
left:0;
right:0;
bottom:0;
border-left-color:transparent;
}
.circle:after{
top:5px;
left:5px;
bottom:5px;
right:5px;
border-right-color:transparent;
}
.circle:hover::before {
transform: rotate(360deg);
}
.circle:hover::after {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
</div>
</div>
Setting the transform property in the :hover will overwrite the existing transform property, so you need to include the translate transforms in the :hover versions to avoid moving the circles in the process of setting their rotation.
If you want the rotation to animate you'll also need to set initial values for the rotation transform.
One additional note: using transition, the rotation will only happen once. If you want repeated rotations you'll need to use an animation (you can do this by uncommenting the animation lines in the snippet).
Demo:
.wrapper {
position: relative;
width: 400px;
height: 200px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
/*animation: spin 1.5s infinite linear;*/
transform: translate(-50%, -50%) rotate(360deg);
}
.circle:hover .circle-1 {
/*animation: spin 1.5s infinite linear reverse;*/
transform: translate(-50%, -50%) rotate(-360deg);
}
#keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
Hi StackOverflow community,
I am trying to produce an "Orbit" on-hover animation, where a number of div elements are stacked on top of one another and they have different sizes so I can play with the borders circling around the "planet" (ie: main element).
My problem though is that it seems like when I stack one div over another and both are supposed to be animated, only the front element plays the animation and not those under.
I thought a z-index property could fix this, but as I thought about this I just thought I'd be switching one animation for the other, since the one I'd elevate with the z-index would then become the front and cover the one element that's now below.
Here's some code:
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner-1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner-4:hover {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
So, basically I want both spinner-1 and spinner-4 to execute their animation when I hover over the spinner. Any ideas?
Set the hover on their shared parent element.
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner:hover #spinner-1 {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner:hover #spinner-4 {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
#keyframes scale {
0% {
transform: scale(0);
}
100% {
transform: scale(5);
}
}
div#scale {
width: 10px;
height: 10px;
border: 1px solid;
border-radius: 50%;
animation: scale 5s infinite;
}
<div id="scale"></div>
How to scale (transform) div in width and height without scaling border width? I'm trying to build this effect.
As for the workaround / alternative you can just animate its width and height:
body {padding:50px}
#scale {
border: 1px solid;
border-radius: 50%;
animation: scale 3s linear infinite;
position: relative;
top: 0;
left: 0;
}
#keyframes scale {
0% {
width: 0;
height: 0;
}
100% {
width: 50px;
height: 50px;
top: -25px;
left: -25px;
}
}
<div id="scale"></div>
To make it grow from the center use negative margins / values for the top and left properties equal to half of the change in size, so in this case that's -25px.
One option you have is to use synced elements. One that scales and another one, empty, that changes size while keeping border-width. The other element I used is the ::after of a wrapper.
#keyframes scale-div {
0% {
transform: scale(0);
}
50% {
transform: scale(1)
}
100% {
transform: scale(0);
}
}
#keyframes scale-border {
0% {
width: 0px;
height: 0px;
}
50% {
width: 100px;
height: 100px;
}
100% {
width: 0px;
height: 0px;
}
}
.scale {
animation: scale-div 5s steps(300, end) infinite ;
transition-timing-function: cubic-bezier(.4,0,.2,1);
background-color: rgba(0,0,0,.05);
border-radius: 50%;
}
.scale,.scale-wrapper {
width: 100px;
height: 100px;
}
.scale-wrapper {
position: relative;
}
.scale-wrapper::after {
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid black;
width: 98px;
height: 98px;
animation: scale-border 5s steps(300, end) infinite;
transition-timing-function: cubic-bezier(.4,0,.2,1);
content: '';
}
<div class="scale-wrapper">
<div class="scale"></div>
</div>
There are ton of problems with scaling transforms since it's ratio based. if you scale it, it's going to scale its layout, border even :after, :before elements and all children.
For what you're trying to do it's best if you just use svg. Svg circle element's radius property can be animated. I suggest you run browser support test on it; However, svg support is pretty wide especially with animations.
svg .circle {
cx: 50%;
cy: 50%;
r: 20px;
stroke: #dfdfdf;
stroke-width: 2px;
transform: translateZ(0);
fill: none;
animation: ping 2s infinite;
}
#keyframes ping {
from {
r: 10px;
}
to {
r: 40px;
}
}
<svg><circle r="20px" class="circle"/></svg>
#keyframes scale {
0% {
transform: scale(0); border: 1px solid;
}
100% {
transform: scale(5); border: 5px solid;
}
}
div#scale {
width: 10px;
height: 10px;
border-radius: 50%;
animation: scale 5s infinite;
}
did you try above code ?
My preloader image does not center inside the circle and on small screen the perloader is not center at all. I have tried re-calculating auto margins nothing seems to work. how can I get the image to stay inside without spinning with the circle and center the preloader all together.
#load_cover {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
background-color: rgba(0, 0, 0);
z-index: 10000;
}
.loaderInner {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -50px;
}
.logo {
position: absolute;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=5&txt=40%C3%9745&w=40&h=45");
background-repeat: no-repeat;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin: -50px 0px 0px -50px;
}
.loader {
border: 4px solid #838383;
border-radius: 50%;
border-top: 4px solid #dddddd;
width: 60px;
height: 60px;
-webkit-animation: spin 0.6s linear infinite;
animation: spin 0.6s linear infinite;
box-shadow: 0 0 1px #999;
filter: blur(0.7px);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="load_cover">
<div class="loaderInner">
<div class="loader"></div>
<div class="logo"></div>
</div>
</div>
You can do something like this.
I took the .logo out and placed the image as the background of .loaderInner and then you position the image center.
#load_cover {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
background-color: rgba(0, 0, 0);
z-index: 10000;
}
.loaderInner {
background-image: url("https://placeholdit.imgix.net/~text?txtsize=5&txt=40%C3%9745&w=40&h=45");
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
/*margin: -50px 0px 0px -50px;*/
transform: translate(-50%, -50%);
}
.loader {
border: 4px solid #838383;
border-radius: 50%;
border-top: 4px solid #dddddd;
width: 60px;
height: 60px;
-webkit-animation: spin 0.6s linear infinite;
animation: spin 0.6s linear infinite;
box-shadow: 0 0 1px #999;
filter: blur(0.7px);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="load_cover">
<div class="loaderInner">
<div class="loader"></div>
<div class="logo"></div>
</div>
</div>