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>
Related
I have written keyframe animation on hover.
#keyframes juggle {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
span:hover{ animation: juggle 1s; }
The animation works fine but on mouse leave, it stops abruptly.
The expectation is to complete the animation even on mouse leave.
Is it possible to do it without jquery.
Hope this works
let section = document.getElementById('homeSection');
let elmnt = section.getElementsByClassName('classname');
for (let i = 0; i < elmnt.length; i++) {
elmnt[i].addEventListener('mouseenter', function () {
elmnt[i].classList.add('Juggle');
setTimeout(function(){
elmnt[i].classList.remove('Juggle')
},400)
})
}
I believe this is something you trying to do
span {
animation-name: juggle-out;
animation-duration: 1s;
animation-repeat-count: 1;
animation-fill-mode: forwards;
}
span:hover{
animation-name: juggle-in;
}
#keyframes juggle-in {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
#keyframes juggle-out {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(0deg, 0deg) translate(0,0);}
}
you should use 2 animations for hover in and hover out
actually there is no hover in and hover out in CSS
It's just a state but the animation-fill-mode plays an important role
The support is not very good though ;)
I recommend adding class instead of this
Use the onmouseover function to add a class which contains the animation and manually remove the class using settimeout function.
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>
I could use some help flipping text horizontally after rotating it 90 degrees. Here is a code pen showing what I'm doing. Basically, I'm trying to flip a couple of the seaweed pieces around so that they face different directions and look a little more natural. I've tried using transform: scaleX(-1) but that hasn't worked. I think it's because I"m already rotating the characters ("~") 90 degrees, but I'm not positive.
.seaweed {
font-size:20em;
color:green;
transform:rotate(90deg);
width:100px;
position:fixed;
bottom:-100px;
margin:0;
animation: float 3s infinite;
}
#seaweed1 {
left:5%;
}
#seaweed2 {
left:12%;
animation-delay:1s;
}
#seaweed3 {
left:50%;
}
#seaweed4 {
left:54%;
animation-delay:0.5s;
}
#seaweed5 {
left:65%;
}
#seaweed6 {
left:75%;
animation-delay:0.7s;
}
#keyframes float {
0% {
transform: translateY(-10px) translateX(0) rotate(90deg);
}
50% {
transform: translateY(40px) translateX(0) rotate(90deg);
}
100% {
transform: translateY(-10px) translateX(0) rotate(90deg);
}
}
Any ideas?
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
FIX
-- Just putting cursor: pointer in the keyframe selection fixed the problem. --
-- In the code, the fixes are in comments so you can distinguish between what was and what it--
I have an image object in html that I am animating on a circular path with keyframes. The image has a css cursor:pointer style and an onclick:"document.location='a url';return false;"' functionality. In Firefox and IE, the image animates along its path and maintains its cursor style and onclick functionality when hovering over it. However, in Chrome, I lose the pointer and onclick functionality. I can not click the image to get directed to the url in onclick and I also lose the cursor style which becomes the default arrow. When I take out the animation code, the pointer and onclick functionality work just fine. What is going on here and any suggestions to how I can work around this?
The html:
<img id="imgId" onclick="document.location='a url';return false;" src="img.gif" width="30" height="30"/>
The CSS
#imgId
{
cursor:pointer;
position:absolute;
left:50%;
top:50%;
-webkit-animation: myOrbit 12s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 12s linear infinite; /* Firefox 5-15 */
-o-animation: myOrbit 12s linear infinite; /* Opera 12+ */
animation: myOrbit 12s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
The CCS Animation - located below above
#-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); /*cursor:pointer;*/}
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
#-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); /*cursor:pointer*/}
}
#-o-keyframes myOrbit {
from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer*/ }
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
FIX: Just putting cursor:pointer; in the keyframe selection fixed the problem.
-- In the code, the fixes are in comments so you can distinguish between what was and what is --