I'm trying to get part of my SVG to rotate, but it seems like it's rotating around an extremely large origin, which is confusing because the actual path is incredibly small.
Here is my path element animation css:
.wing1 {
transform-origin: bottom right;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
#keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Here is the JSFiddle (with the SVG included): http://jsfiddle.net/c5g3sq4e/
I'm trying to get the wing element to rotate around the bottom right corner so that it looks like it's flying, but I've never done SVG element rotation so I'm not sure that I've specified the origin correctly.
You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
#keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Related
So i have this block of code that makes an animation:
.c:hover{
animation: rotate 1s ease;
}
#keyframes rotate {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
Basically i want the animation to keep playing even after unhover until it ends
Can anyone help?
I have an SVG with 3 paths but only needed em to rotate continually. This worked well on an SVG with one path but not with this one and I got a few others that I could like to rotate on a fixed position.
Here is the source code with preview!
.rotate {
animation: rotation 8s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
you can transform the rotation origin, the default origin is the upper left corner.
to rotate a item around its center you have to transform the origin.
.rotate {
transform-origin: 50% 50%;
animation: rotation 8s infinite linear;
}
I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.
.duck {
position: absolute;
animation: flip-me;
animation-duration: 1000ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes flip-me {
0% { transform: scaleX(1) }
100% { transform: scaleX(-1) }
}
You can consider steps()
img {
animation: flip-me 2s steps(1) infinite;
}
#keyframes flip-me {
50% { /*Pay attention: it's 50% not 100% !!*/
transform: scaleX(-1)
}
}
/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
I have a css spin class I found. It works well on other elements, but when I apply it to text, it has a very annoying radius. how do I get the axle of the spin to be in the middle of the text like it should?
.spin {
-webkit-animation: spin 4s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
It depends on what element your text is in, but the key is in the display property. Any block-level element will be full width by default (such as <div>). You can force the element to be inline-block with display: inline-block, which will constrain the width of the element to the edge of the text, and cause the rotation to function as expected.
This can be seen in the following:
.spin {
-webkit-animation: spin 4s infinite linear;
display: inline-block;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<div class="spin">Spin</div>
Note that this will only work for inline-block displays, and not inline displays, as for rotation to work you need the element to be able to adjust its positioning in the container.
I'm trying to animate two images to a center point and then rotate them concurrently. I'm not sure how to transform the svgs before the animation begins. See the following model.
I need to do a transform: rotate(90deg) before the animation begins (on :hover). I can't seem to get the transform to take effect before the animation. See the following codepen:
See my codepen: http://codepen.io/himmel/pen/dPzVmg
instead of delaying the animation
.svg-container-burger {
-webkit-animation: rotateClockwise 1s linear;
-webkit-animation-delay: 1s;
}
and trying to rotate the objects before the animation, just extend the animation to the pause prior to it, and set the rotation in it
.svg-container-mouth {
-webkit-animation: rotateClockwise 2s linear;
}
#-webkit-keyframes rotateClockwise {
0% {
-webkit-transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
codepen