This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate
Related
In the following snippet you can see a space between h2 and animation. I want it remove it in my case.How can I do this?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-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);
}
}
h2 {
text-align: center;
}
<h2>xyzxyzxyzxyz.
<div class="loader" style="float:right;"></div>
</h2>
JSFIDDLE: https://jsfiddle.net/wdzLv7tk/
Float:right cause the problem. There are so many ways to keep the element side by side. I applied one of them. Here I have display:table for my parent element and for each child it is display:table-cell which gives a solution to your problem.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
.parent {
display: table;
margin:auto;
}
.child {
display: table-cell;
}
h2 {}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<div class="parent">
<h2 class="child">xyzxyzxyzxyz.</h2>
<div class="loader child" style=""></div>
</div>
Just use text-align: right instead of text-align: center
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-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); }
}
h2 {
text-align: right;
}
<h2>xyzxyzxyzxyz.<div class="loader" style="float:right;"></div></h2>
I've been trying to make an icon spin on page load using css3 animations. The icon spins in Chrome and IE 9+ but it is not working on firefox version 44. I would appreciate your help.Here is my code:
<div class="pageloading-mask"><div>
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite ease-in-out;
-moz-animation: spin 2s infinite ease-in-out;
animation: spin 2s infinite ease-in-out;
color: #038A3B;
top: 200px !important;
transform: translateY(-50%) !important;
}
#keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Just remove this line transform: translateY(-50%) !important; and it will work like here:
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite 0s ease-in-out;
-moz-animation: spin 2s infinite 0s ease-in-out;
animation: spin 2s infinite 0s ease-in-out;
color: #038A3B;
top: 200px !important;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="pageloading-mask">
<div></div>
</div>
see here :jsfiddle
inside the -moz-keyframes you wrote -webkit-transform instead you need to use -moz-transform
and don't use !important on the transform: translateY(-50%)
code :
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
also. be sure you write html correctly :
<div class="pageloading-mask">
<div></div>
</div>
tested in mozzila firefox . let me know if it works
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}
Im trying to make a snake loader spinner with css using keyframes animation but i don't know it doesn't work
someone can help?
here the fiddle:
https://jsfiddle.net/fs6kafsn/
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: rotate 0.8s infinitelinear!important;
-webkit-animation: rotate 0.8s infinitelinear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
thanks in advance
You need to add prefixing to your keyframes as well.
fiddle demo
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This would need to be prefixed with -moz- as well for firefox compatibility.
Note
the unprefixed version should always be placed after the prefixed versions.
Full Demo
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
-webkit-animation: rotate 0.8s infinite linear !important;
-moz-animation: rotate 0.8s infinite linear !important;
animation: rotate 0.8s infinite linear !important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="spinner">
</div>
For webkit based browser like chrome you need #-webkit-keyframes and for Mozilla firefox you need #-moz-keyframes
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: spin 0.8s infinite linear!important;
-webkit-animation: spin 0.8s infinite linear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
<div class="spinner">
</div>
I changed your fiddle. Here is the working animation: fiddle:
Code:
#-moz-keyframes myanimation /* Firefox */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes myanimation /* Safari and Chrome */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation:myfirst 5s;
-moz-animation:myanimation 0.8s infinite linear; /* Firefox */
-webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
I am trying to get one div to rotate around another using CSS3 but for some reason it will not animate at all. I am using Chrome. Can anyone help?
here is the css
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
#-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
}
and here is the html
<div class="container">
<div id="center"></div>
<div id="small"></div>
</div>
You need to use -webkit prefix proprietary property to ensure that your animation runs in Webkit browsers
You Need To Use Prefix For Webkit Browsers
Demo
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
-webkit-transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
-webkit-transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
transform-origin: 50% 200px;
-webkit-transform-origin: 50% 200px;
}
Side Note: You should use proprietary properties of each browser i.e
-moz, -webkit, -o and -ms so that older versions of the
browser don't fail to animate