As the question says I'd like to rotate an icon 360 degrees one way the rotate back the other repeatedly. Going one direction is easy enough what I don't understand is stopping and going the other direction.
#loading {
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<i id="loading" class="material-icons">autorenew</i>
I have tried creating another rotation going the other direction but it doesn't seem to apply.
#-webkit-keyframes rotationBackwards {
from {
-webkit-transform: rotate(359deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
Transformation doesn't apply on inline elements. You have to make your element a block-level element instead (See Transformable Elements on the specifications - If you include the Martial Icons, this will be set by default).
The Animation itself can simply be done with a rotation to 360 degrees for the first half (50%) and a rotation back to 0 degrees for the second half. Mind that the duration of the animation splits into both directions (given your 2s animation, every direction will take 1s).
#loading {
display: inline-block;
animation: rotation 2s infinite linear;
}
#keyframes rotation {
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>
Here is another idea by simply using alternate value of animation-direction and by keeping your initial animation:
#loading {
animation: rotation 2s infinite linear alternate;
}
#keyframes rotation {
/*from {
transform: rotate(0deg); no needed to define this
}*/
to {
transform: rotate(360deg);
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>
Related
I want my element, which is a text, to move in a circular path. I need to use CSS for this. I am attaching my code for the same. The error I face is I need to translate my element to the circumference of the circle. This causes the text to jump to the circumference at the start and the end of the animation. How do I solve this? Is there another method to animate objects to move in a circular direction?
.element{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
animation: orbit2 4s forwards;
}
#-webkit-keyframes orbit2 {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div class= "element">
<a>NEN</a>
</div>
Something like this (or can even change the way the text wraps around the circle):
#spin {
position:absolute;
top:25%;
left:50%;
margin:50px;
animation: orbit 4s forwards infinite;
animation-timing-function: linear;
}
#-webkit-keyframes orbit {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div id="spin"><p>text</p></div>
I've used the following CSS taken from here.
:host {
animation: rotation 2s infinite linear;
border: 10px solid yellow;
}
#keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
I don't get to see any rotation, although I can see the border, so I know that I target the correct element. I don't think it's required to have an IMG (and mine is a custom thingy in Angular). It works on the IMG and also on a DIV. Not sure how to diagnose it further as rotations/animations aren't my strongest suite.
One approach is to put the custom component in a DIV and rotate that. However, it does rotate around the middle of the screen (wiiiide circle) instead of spinning around itself.
<div id="loading">
<my-icon-globe></my-icon-globe>
</div>
#loading { animation: rotation 2s infinite linear; }
#keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
You can adjust transform-origin of the DIV if you attempt the second approach.
I don't have much knowledge in css3 and I got this code fragment that makes a div spin infinitely.
.spin {
-webkit-animation: rotation 0.4s linear infinite;
animation: rotation 0.4s linear infinite;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
}
#-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(-180deg); }
100% { -webkit-transform: rotate(-360deg); }
}
#keyframes rotation {
0% { transform: rotate(0deg); }
50% { transform: rotate(-180deg); }
100% { transform: rotate(-360deg); }
}
I want to stop the rotation after a couple of seconds but I don't know what to change. I tried changing infinite to 3 but it stopped and placed my div somewhere else. I need a smooth stop and retains the div original position.
see here jsfiddle
the element was moving because of the translate
code :
.spin {
height:50px;
width:50px;
background:red;
-webkit-animation: rotation 0.4s linear 3;
animation: rotation 0.4s linear 3;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
you should know that the infinite is a value of the animation-iteration-count property which specifies the number of times an animation should be played. so not the seconds.
if you want to stop after N seconds use animation-duration and i suggest you divide the animation declaration into parts, like this :
jsfiddle
for ex you want the spin to rotate for 2 seconds, if you set animation-duration to 2 seconds, the whole animation will take 2 seconds to complete, and that's not what you want. You want your spin to rotate fast for 2 seconds, so you need to calculate the animation-iteration-count like this 2second/animation-duration
say you want 1 rotation to be completed in 0.5s, you set the animation-duration:0.5s and then animation-iteration-count to 2s/0.5 = 4
code :
spin {
height:50px;
width:50px;
background:red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
animation-name:rotation;
animation-delay:0s;
animation-duration:0.5s;
animation-iteration-count:4;
animation-fill-mode:backwards;
}
for more info about animations, read here : CSS3 animation Property
I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.
When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.
Here's my element and animation: http://jsfiddle.net/2Lwftq6r/
HTML:
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
CSS:
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
transform: translateX(0);
}
#anim:checked ~ div {
-webkit-animation: dance 2s infinite ease-in-out;
-moz-animation: dance 2s infinite ease-in-out;
}
#-webkit-keyframes dance {
0%, 100% { -webkit-transform: translateX(0); }
50% { -webkit-transform: translateX(300px); }
}
#-moz-keyframes dance {
0%, 100% { -moz-transform: translateX(0); }
50% { -moz-transform: translateX(300px); }
}
I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution:
So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:
#Spatula:hover{
animation-direction:alternate;
transform: translate(1.2cm,1cm);
transition: all 1.5s;
-webkit-transition: all 1.5s;
}
#Spatula{
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
Good luck!
You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):
HTML:
<input type="checkbox" id="anim-input">
<label for="anim-input">Start / stop animation</label>
<div class="anim-div"></div>
CSS:
.anim-div {
margin-top: 50px;
width: 50px;
height: 10px;
background: #000;
}
.anim-div_active {
-webkit-animation: moving 2s ease-in-out infinite alternate;
animation: moving 2s ease-in-out infinite alternate;
}
.anim-div_return {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
#-webkit-keyframes moving {
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(300px); }
}
#keyframes moving {
0% { transform: translateX(0); }
100% { transform: translateX(300px); }
}
Javascript:
$('#anim-input').on('change', function() {
var $animDiv = $('.anim-div');
if (this.checked) {
$animDiv.removeClass('anim-div_return')
.addClass('anim-div_active');
return;
}
var transformValue = $animDiv.css('webkitTransform') ||
$animDiv.css('transform');
$animDiv.css({'webkitTransform': transformValue,
'transform': transformValue})
.removeClass('anim-div_active');
requestAnimationFrame(function() {
$animDiv.addClass('anim-div_return')
.css({'webkitTransform': 'translateX(0)',
'transform': 'translateX(0)'});
});
});
P.S.
Vendor prefixes are based on actual browsers list from http://caniuse.com.
Check out This StackOverflow question.
You aren't going to like this answer, but reality is that CSS3
animations aren't really useful to achieve this. To make this work you
would need to replicate a lot of your CSS in your Javascript which
kind of destroys the point (Like for example in this closely related
answer
Change speed of animation CSS3?).
To really make it stop smoothly your best bet would be to write the
animation on a platform like the Greensock animation library
which provides all the tools you need to make it actually smoothly
stop instead of suddenly stop.
There's also another answer below it that does make an effort at using CSS, you can look at that one.
There is also an alternate solution, it might not give you the desired effect of going back to it's original state, but since nobody mentioned it and this problem seems to have no solution, it's possible to pause the animation purely in css, locking it's state until it's started again
To pause the animation you need first to make the animation available even when the checkbox is not checked
And make use of the animation-play-state property
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
animation: dance 2s infinite ease-in-out paused;
}
#anim:checked ~ div {
animation-play-state: running;
}
#keyframes dance {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(300px); }
}
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
In rotate animation, works in Chrome but not in Firefox. Why?
#-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#example {
background: red;
width: 100px;
height: 100px;
-moz-animation: rotate 20s linear 0 infinite;
-webkit-animation: rotate 20s linear 0 infinite;
}
http://jsfiddle.net/WsWWY/
Current Firefox implementations fail unless time values of 0 have units. Use 0s or 0ms.
http://jsfiddle.net/WsWWY/1/
Note: The W3C explicitly allows for the number 0, without units, to be a length value, but it says no such thing for other values. Personally, I hope this changes, but for the time being the Firefox behavior is not incorrect.