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.
Related
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); }
}
}
I have some animations which I use for the purpose of transition. Although the transition is cool, it brings up the horizontal and vertical scrollbars which is pretty ugly.
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
#keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Is there any where to define to the browser using CSS that no scrollbar must be displayed during these animations, or in other words, Overflow = Hidden WHEN Animating.
I have a simple GIF image that I am applying a keyframe animation to (to make it spin infinitely), and for some reason, if I hover over links elsewhere on the page, they randomly jump up or down by a pixel or two.
When I remove the DOM element that has the animation on it (the image) the jumping does not occur, leading me to believe it is somehow caused by the CSS animation somehow. This ONLY happens in Chrome, even the most recent update of Chrome.
I have read all other related questions on here and nothing has resolved it yet, it is NOT the -webkit-backface-visibility fix needed here.
Example CSS:
#mixin spin {
-webkit-animation: spin360 1.26s infinite linear;
animation: spin360 1.26s infinite linear;
}
#-webkit-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animated-image {
position: absolute;
#include spin;
}
Example DOM:
<h3 class="header">
Heading title
</h3>
<div class="animated-image"><img src="../img/loader.gif"></div>
Working example: http://codepen.io/caseytrombley/pen/YWYqRQ
I think the problem is in chrome the img it isn't vertical and horizontal centered.
I suggest you use flexbox to centered and must be fixed
Other way is use the img like background image and put
background-position: center center;
background-size: contain;
but I can imagine it's an animated gif, in that case must be fixed with flex
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
When scaling an SVG image using CSS scale transform, the image gets blurred under Chrome or Safari?
Here is a bit of my code:
#logo {
animation: cssAnimation 120s infinite;
-webkit-animation: cssAnimation 120s infinite;
-moz-animation: cssAnimation 120s infinite;
}
#keyframes cssAnimation {
0% { transform: scale(1) }
50% { transform: scale(2) }
100% { transform: scale(1); }
}
Many thanks for any help!
Raphaël
Thanks a lot War10ck! This article helped me: when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border
Using scale3d instead of scale, not going over 1, made the trick!