This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS3 Continous Rotate Animation (Just like a loading sundial)
I have this simple GIF loading circle. Is it possible something like this can be coded with just CSS3? Any help is much appreciated.
jsFiddle
HTML:
<div class="arc-hider"></div>
CSS:
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes rotate {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#-o-keyframes rotate {
from { -o-transform: rotate(0deg) }
to { -o-transform: rotate(180deg) }
}
#-ms-keyframes rotate {
from { -ms-transform: rotate(0deg) }
to { -ms-transform: rotate(360deg) }
}
.arc-hider {
width: 30px;
height: 30px;
border-radius: 60px;
border: 6px solid #36669F;
position: absolute;
left: 45%;
z-index: 5;
clip: rect(0px 21px 21px 0px);
-webkit-animation: rotate 2s linear infinite 0s;-moz-animation: rotate 2s linear infinite 0s;-o-animation: rotate 2s linear infinite 0s;-ms-animation: rotate 2s linear infinite 0s;
animation: rotate 2s linear infinite 0s;
}
Should do the trick
Live Demo | Source
Related
I want to run two separate keyframe transform animations on the same element but it only seems to run the last animation. Is there a way to do this?
I have tried the example in the code below (codepen), as well, I've tried using position absolute on the element and animating the top and left values. It gives the effect I'm looking for, but it doesn't seem as smooth as using translate.
#keyframes animate-x {
from { transform: translateX(0); } to { transform: translateX(100%); }
}
#keyframes animate-y {
from { transform: translateY(0); } to { transform: translateY(100%); }
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
animate-x 20s linear infinite alternate,
animate-y 15s linear infinite alternate;
}
I'm looking to run both the translateX and translateY animations simultaneously at different speeds.
No, but you can combine multiple transform directives into one property:
#keyframes animate-y {
from {
transform: translateY(0) translateX(0);
}
to {
transform: translateY(100%) translateX(100%);
}
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
/*animate-x 2s linear infinite alternate,*/
animate-y 2s linear infinite alternate;
}
<div class="element"></div>
Also, you can break up the animation by using percentages in your keyframes instead of from and to:
#keyframes animate-y {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100%) translateX(0);
}
50%{
transform: translateY(100%) translateX(100%);
}
75% {
transform: translateY(0%) translateX(100%);
}
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
/*animate-x 2s linear infinite alternate,*/
animate-y 2s linear infinite alternate;
}
<div class="element"></div>
Edit: Move two directions at different speeds:
#keyframes animate-y {
0% {
transform: translateY(0) translateX(0%);
}
25% {
transform: translateY(100%) translateX(50%);
}
50%{
transform: translateY(0%) translateX(100%);
}
75% {
transform: translateY(100%) translateX(50%);
}
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
/*animate-x 2s linear infinite alternate,*/
animate-y 2s linear infinite alternate;
}
<div class="element"></div>
My fiddle example:
https://jsfiddle.net/e4rL56ja/
For some reason my circle that I created is rotating incorrectly, this is a very strange issue, it's moving/bobbing around when I just want it to stay in an exact place.
Has anyone encountered an issue like this before?
I attempted to do stuff such as border-radius, but there was no luck there
I hope you guys can help out with my issue!
HTML:
<div class='circle rotating'>
</div>
CSS:
.circle {
background: url(https://i.ibb.co/8j8nSns/example.png) no-repeat;
width: 547px;
height: 530px;
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
The wobbling you're seeing is due to the height and width not being the same. A "perfect" circle will have the exact same height and width. I also changed the background so that it wasn't the image of the wobbling circle itself. And added a border-radius of 50%. You can clearly now see that the circle is rotating as it should.
https://jsfiddle.net/3gktzevm/
.circle {
background: linear-gradient(to right, #333333, #dd1818);
width: 530px;
height: 530px;
border-radius: 50%;
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
See this below code.... and see circel is rotating and see circle border also rotate.
.circle {
width: 500px;
height: 500px;
background-color:red;
border-radius: 50%;
border: 2px dashed blue;
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
<div class='circle rotating'>
</div>
You should be giving same height and width, Also try to use a proper centered png for circle. Don't forget to cover background too for .circle: background-size: cover;
You image has a dimension of 547x530 that's and your circle is within this area but not centred 1. To fix this you can make the container to be 564x547. You add the difference 17px (547 - 530) on the right then you make the image aligned to the left and it will get centred in the container and it will rotate like you want.
There is also some pixel from the bottom that you need to consider to have a perfect centring:
.circle {
background: url(https://i.ibb.co/8j8nSns/example.png) left bottom no-repeat;
width: 564px;
height: 536px;
box-sizing: border-box;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 1s linear infinite;
}
<div class='circle rotating'>
</div>
Or adjsut the alignment to the right top and make the box to be 530x530. This will trim the extra space from the image and keep only the circle
.circle {
background: url(https://i.ibb.co/8j8nSns/example.png) right top no-repeat;
width: 530px;
height: 530px;
box-sizing: border-box;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 1s linear infinite;
}
<div class='circle rotating'>
</div>
1 To better illustrate the issue simply add border to the main image to see the gap on the left and bottom size:
img {
max-width:100%;
border:1px solid;
}
<img src="https://i.ibb.co/8j8nSns/example.png">
It's an issue with the circular flag icon in the screenshot below. I want it to rotate 45 degrees clockwise and keep it rotated in + shape as long as the cursor is hovering on the image; then rotate back ccw when the cursor leaves the image.
This is the code I wrote so far. When hovering the image rotates 45' cw correctly but it goes back to X shape immediately.
#icon{
display: inline-block;
margin: 0 auto 0 0;
width: 2.4em;
height: 2.4em;
}
#icon:hover{
-webkit-animation:cw 0.4s linear 1;
-moz-animation:cw 0.4s linear 1;
animation:cw 0.4s linear 1;
}
#-moz-keyframes cw { 100% { -moz-transform: rotate(45deg); } }
#-webkit-keyframes cw { 100% { -webkit-transform: rotate(45deg); } }
#keyframes cw { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }
#-moz-keyframes ccw { 100% { -moz-transform: rotate(-45deg); } }
#-webkit-keyframes ccw { 100% { -webkit-transform: rotate(-45deg); } }
#keyframes ccw { 100% { -webkit-transform: rotate(-45deg); transform:rotate(-45deg); } }
So how can I solve this problem? I think the #icon should be modified a bit because it might keep its original state even after rotation.
Use a transition instead of an keyframes animation:
img {
transition: all .2s ease;
transform: rotate(0deg)
}
img:hover {
transform: rotate(45deg)
}
<img src="https://placehold.it/100x100">
Try using animation-fill-mode: forwards;
or use animation:cw 0.4s linear 1 forwards;
This is code that I am using to rotate a image:
<style>
#logo1{ position: absolute;
-moz-animation: 3s rotate infinite linear ;
-moz-transform-origin: 50% 50%;
-webkit-animation: 3s rotate infinite linear ;
-webkit-transform-origin:50% 50%;
}
#-moz-keyframes rotate {
0 { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
</style>
This code is working fine for firefox, safari and chrome. But its not working for Internet Explorer. What changes I need to do please help....
<style>
#logo1{ position: absolute;
animation:3s rotate infinite linear ;/* IE 10 */
transform-origin:50% 50%;/* IE 10 */
-moz-animation: 3s rotate infinite linear ;
-moz-transform-origin: 50% 50%;
-webkit-animation: 3s rotate infinite linear ;
-webkit-transform-origin:50% 50%;
}
#-moz-keyframes rotate {
0 { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate{
0 { transform: rotate(0);} /* IE 10 */
100% { transform: rotate(360deg);} /* IE 10 */
}
</style>
jsfiddle demo
You can use transform for IE 10/11, and -ms-transform for IE 9.
More compatibility info: http://caniuse.com/#search=transform
If you need support for older IE add this too:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
I am running into problems with getting cross-browser animation of a ball on a webpage I am developing.
The football starts off hovering when the user arrives on the webpage. When the user scrolls and the football hits the top of the screen, using Jquery Waypoints, I remove the hovering animation and add the spinning, translating animation so that the football moves diagonally(spinning) down the page to the next section. In Firefox, the ball hovers perfectly and in Chrome the ball doesn't hover at all. When the element hits the top of the page in Chrome the ball rotates and translates however in Firefox the ball does not rotate and only translates.
The HTML:
<div id="footy">
<img id="kick" class="object footy float" src="<?php echo drupal_get_path('theme', 'footykids'); ?>/bootstrap/img/footy.png">
</div>
The CSS:
.footy {
z-index: 1999;
width: 150px;
height: auto;
}
.drop-punt {
transform: translate(360px, 360px) rotate(-360deg);
-webkit-transform: translate(360px, 360px) rotate(-360deg);
-o-transform: translate(360px, 360px) rotate(-360deg);
-moz-transform: translate(360px, 360px) rotate(-360deg);
}
.object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.float {
animation: floating 2s infinite linear;
-webkit-animation: floating 2s infinite linear;
-moz-animation: floating 2s infinite linear;
-ms-animation: floating 2s infinite linear;
-o-animation: floating 2s infinite linear;
}
#-webkit-keyframes floating{
0% {
transform: translate(0px, -10px);
}
50% {
transform: translate(0px, 10px);
}
100% {
transform: translate(0px, -10px);
}
}
#-moz-keyframes floating{
...
}
#-ms-keyframes floating{
...
}
#-o-keyframes floating{
...
}
#keyframes floating{
...
}
JQuery using Waypoints:
( function ($) {
$( document ).ready( function() {
$('#kick').waypoint(function() {
$("#kick").removeClass("float");
$("#kick").addClass("drop-punt");
});
});
});
(jQuery);
The webkit animation can be fixed by changing the keyframes to:
#-webkit-keyframes floating{
0% { -webkit-transform: translate(0px, -10px); }
50% { -webkit-transform: translate(0px, 10px); }
100% { -webkit-transform: translate(0px, -10px); }
}
The Firefox issue can be fixed by adding a rotation to the keyframes:
#-moz-keyframes floating{
0% { -moz-transform: translate(0px, -10px) rotate(0deg); }
50% { -moz-transform: translate(0px, 10px) rotate(0deg); }
100% { -moz-transform: translate(0px, -10px) rotate(0deg); }
}
Demo fiddle