.rotate {
display: block;
width: 64px;
height: 64px;
border: 2px black dashed;
animation: rotate 40s linear infinite;
border-radius: 50%;
transform: scale(1.8);
position: relative;
top: 50px;
left: 50px;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="rotate"></div>
if you take a look at the fiddle, the "transform: scale(1.8);" didn't work. Is there any other alternatives to make the border bigger?
There you go. The transform isn't working when you're trying to scale in the initial rotate class is because, its gradually changing because of the rotating animation. You have to fix/scale the width or height initially and your border size then apply the animation on it as shown.
.rotate {
display: block;
width: 115px;
height: 115px;
border: 4px black dashed;
animation: rotate 40s linear infinite;
border-radius: 50%;
position: relative;
top: 50px;
left: 50px;
}
#keyframes rotate {
0% {
transform: rotate(0deg);}
100% {
transform: rotate(360deg);
}
}
<div class="rotate"></div>
Not that hard really. Increase the height and width manually and increase the border-width.
.rotate {
display: block;
width: 115px;
height: 115px;
border: 4px black dashed;
animation: rotate 40s linear infinite;
border-radius: 50%;
position: relative;
top: 50px;
left: 50px;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="rotate"></div>
Related
The issue is visible when animating the skewY() property. Looks like the element's width shrinks down a little and no longer touches the sides of an equally wide container.
The same does not happen when animating with skewX() - the height is animated as expected.
I'm experiencing the bug in Safari only, both desktop and mobile browsers. Firefox and Chrome work as expected. This issue is visible during transition or animations only.
GIF previews:
Animation in Firefox/Chrome
Animation in Safari
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
Try to use browser prefix.
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
-webkit-animation: skew-x 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
-webkit-animation: skew-y 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#-webkit-keyframes skew-x {
0% { -webkit-transform: skewX(15deg) skewY(0); }
to { -webkit-transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
#-webkit-keyframes skew-y {
0% { -webkit-transform: skewX(0) skewY(15deg); }
to { -webkit-transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
I'm working on a animation with scaling a box and it is rounded with 8px. Ref: https://codepen.io/anon/pen/ePGxqy. However, the rounded angle is weird when the box expanded and I don't want to scale it by changing its width in keyframes. How can I correctly scale a rounded box with a rounded border?
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box:hover {
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes singleRevert {
0% {
transform: scaleX(7.5) scaleY(0.46)
}
50% {
transform: scaleX(1) scaleY(0.46)
}
100% {
transform: scaleX(1) scaleY(1)
}
}
#keyframes singleExpend {
0% {
transform: scaleX(1) scaleY(1)
}
50% {
transform: scaleX(1) scaleY(0.46)
}
100% {
transform: scaleX(7.5) scaleY(0.46)
}
}
<div id="box"></div>
Basically you need to animate your border radius to match the scale of your box.
For simplicity's sake if your box radius is 8px and you scale your box by 8 times your border radius should be 1px at the scaled size. If your box is 0.5 scaled the border would be 16px;
Alternatively you could animate the width and height of the box. This would respect the borders and you would not have to change them in this case.
Updated your version:
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box:hover {
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes singleRevert {
0% {
transform: scaleX(8) scaleY(0.5);
border-radius: 1px;
}
50% {
transform: scaleX(1) scaleY(0.5)
border-radius: 8px;
}
100% {
transform: scaleX(1) scaleY(1)
border-radius: 8px;
}
}
#keyframes singleExpend {
0% {
transform: scaleX(1) scaleY(1)
border-radius: 8px;
}
50% {
transform: scaleX(1) scaleY(0.5)
border-radius: 8px;
}
100% {
transform: scaleX(8) scaleY(0.5)
border-radius: 1px;
}
}
<div id="box"></div>
Simple version:
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box:hover {
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes singleRevert {
0% {
width: 400px;
height: 40px;
}
50% {
width: 55px;
height: 40px;
}
100% {
width: 55px;
height: 55px;
}
}
#keyframes singleExpend {
0% {
width: 55px;
height: 55px;
}
50% {
width: 55px;
height: 40px;
}
100% {
width: 400px;
height: 40px;
}
}
<div id="box"></div>
The problem with animating it by using transform is that you are stretching the element. So whatever border-radius you have it set to, will also get stretched along with the width and height of your element. ScaleX and ScaleY scales the ENTIRE element, not just the dimensions.
A better solution to animating the size of your element while having the border radius be consistent is to animate the height and width. Something like this would work:
#keyframes singleExpend {
0% {
width: 55px;
height: 55px;
}
50% {
width: 55px;
height: 40px;
}
100% {
width: 400px;
height: 40px;
}
}
Good luck!
I have this loader working fine.
CSS:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div *ngIf="somevalue" class="loader"></div>
Now I need put some text in center
but my try not working. How Can I let my loader like in second image? I dont want install more external components, md-progress-loader, md-circle...etc.. TRY IT
A very simple solution is to just place the text into another div and position it accordingly - something like
<div class="container">
<div class="loader"></div>
<div class="description">Text</div>
</div>
and
.description
{
position: absolute;
top:0;
left:0;
line-height:150px;
width:152px;
text-align:center;
}
.container
{
position:relative;
}
This counters the rotation and provides a roughly sane box in which other elements can be placed.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader div {
display: block;
animation: spin 2s linear infinite reverse;
position: relative;
height: 100%;
}
.loader div span {
display: inline-block;
text-align: center;
}
<div *ngIf="somevalue" class="loader"><div><span>testing lots of text in this text box</span></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 ?