I have the following letters ABC as shown below:
<body>
<div id="container">
<div id="shape" class="spin">
<div id="A" class="plane">A</div>
<div id="B" class="plane">B</div>
<div id="C" class="plane">C</div>
</div>
</div>
What I want is each letter to spin around its x-axis?
I tried (for letter C):
#C {
-webkit-animation: spinAboutItsCentre 8s linear;
}
#-webkit-keyframes spinAboutItsCentre {
from {
-webkit-transform: rotateX(0);
}
to {
-webkit-transform: rotateX(360deg);
}
}
but the letter C moves over to where the letter A is an spins it its axis.
Any ideas?
JD
It should look something like this, you need to specify your transform-origin properties;
x-%, y-%, and z-px.
Notice spinning about the Y-axis creates a bit of offset because the engine's interpretation of the character's position originates at the "beginning" (side) of the object, not the center of the object.
The 0% and 100% designations represent your "from" and "to" clauses, this format allows you to add as many of these lines as you wish to increment the movement over your specified timeframe (i.e. 25% rotate 90deg, 50% rotate 180deg, 75% rotate 270deg, 100% rotate 360deg).
#-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
#-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
Try these styles, they should work alright.
#Ca
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinX 8s infinite;
}
#Cb
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinY 8s infinite;
}
<div id="Ca">C</div>
<div id="Cb">C</div>
Transforms have a "transform-origin" associated with them. When no transform origin is specified, it is automatically set at (50%, 50%) of the element. When your exact code is entered as a jsfiddle, it works as intended.
My guess is that in your complete code you have specified a transform origin incorrectly or have other weirdness in the base CSS for your class.
Update: So, yes, you had weirdness in the base CSS. It would be helpful to see your complete CSS and HTML for debugging.
Related
I'm using webkit keyframes to animate some rectangles. From everything I can see, the animation should be operating correctly. I'm using the forwards modifier to retain animation changes and all of my syntax is correct (see my CSS below). However, every time I execute, the animation seems to drop each of the animation changes as they occur.
So for example, say I modify the width of the rectangle at 0% and then rotate the rectangle at 25%. As it is rotating, the width will return to its original setting. I'm really not sure what's happening here. Am I missing a fundamental aspect to keyframes?
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
opacity: 100;
-webkit-animation: close-top 5s forwards;
}
#-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: scaleX(0.5);}
100% {transform: rotate(-45deg);}
}
every step is override the previous step property transform, what you can do is to append to this property the previous changes, like this:
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
opacity: 100;
background-color: black;
width: 100px;
height: 100px;
-webkit-animation: close-top 5s forwards;
}
#-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: translate(0px, 15px) scaleX(0.5);}
100% {transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);}
}
<div class='navbar-toggler'>
<div class='icon-bar'>
<div></div>
</div>
</div>
This is because of how the transform property works. Every time you are setting transform in your keyframes you are overwriting the previous value.
What you want is something like this:
#-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: scaleX(0.5) translate(0px, 15px) ;}
100% {transform: rotate(-45deg) scaleX(0.5) translate(0px, 15px);}
}
Note how I am keeping the previous transforms present in the value and adding the new change to the front of of the list.
The the individual transforms evaluate from right to left.
All the stages of the animation are transform settings – if a new one is triggered, it replaces the previous one (the previous parameters are animated back to their default values). To avoid that, leave the previous values/parameters in the new transform setting and add the new parameter/setting as shown below:
.test {
width: 100px;
height: 60px;
background: #fa0;
-webkit-animation: close-top 5s forwards;
}
#-webkit-keyframes close-top {
0% {
transform: translate(0px, 5px);
}
33% {
transform: translate(0px, 15px);
}
66% {
transform: translate(0px, 15px) scaleX(0.5);
}
100% {
transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);
}
}
<div class="test">TEST</div>
How can I repeat a spinning animation x times before easing it out ?
For instance :
#spin-please {
background: green;
width: 50px;
height: 50px;
animation: spin 3s infinite ease-in-out;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
49% {
transform: rotate(359deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spin-please">
</div>
My animation right now is not very smooth at all (as you can see between the 1st and 2nd rotation), and there is an easing between the 2 rotations, which I want only at the start of the first of the rotation and at the end of the second (or the third if I choose to go with an additional rotation).
Easing in ==> rotation 1 ==> rotation 2 ==> easing out
Is this doable with CSS ?
Instead of repeating the animation infinite times, you can specify a number of repetitions like this:
animation: spin 3s 3 ease-in-out; /* 3secs, repeat 3 times */
See animation iteration count for more examples.
Also useful to see the animation short-hand docs to set all the properties at once (like your code does)
I am not sure what the desired outcome you are looking for but I modified the animation to display the spinning happening three times (with some reversal spin as well)
#spin-please {
background: green;
width: 50px;
height: 50px;
/* #keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name
*/
animation: 1s 3 spin;
animation-timing-function: ease-in, linear, ease-out;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spin-please">
</div>
The problem is totally not because your animation isn't smooth,
the problem with keyframes, according to this code
49% {
transform: rotate(359deg);
}
50% {
transform: rotate(0deg);
}
Your animation have to do 360deg rotation in very short time which is 1% ( between 49% - 50%) for any animation-timing-function value your animation is not smooth, Try this code :
#spin-please {
background: green;
width: 50px;
height: 50px;
animation: spin 3s ease infinite;
}
#keyframes spin {
0% {
animation-timing-function: ease-out;
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
animation-timing-function: ease-in;
transform: rotate(360deg);
}
}
<div id="spin-please">
</div>
Remember you can change your animation-timing-function in your keyframes. more details about animation-timing-function.
#spin-it {
background: green;
width: 50px;
height: 50px;
animation: spin 1.5s ease infinite;
}
#keyframes spin {
0% {
animation-timing-function: ease-out;
transform: rotate(0deg);
}
25% {transform: rotate(90deg);}
50% {
transform: rotate(180deg);
}
75% {transform: rotate(270deg);}
100% {
animation-timing-function: ease-in;
transform: rotate(360deg);
}
}
<div id="spin-it">
</div>
My version of MMJ's
It goes through 5 steps.
Ease in >>> Turn 1 side >>> Turn 1 side >>> Turn 1 side >>> Turn 1 side >>> Ease out
I would like my animation to not stop at 50%, how to avoid this short iterruption?
#-webkit-keyframes PLAY {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(2);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play {
-webkit-animation-name: PLAY;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-out;
}
I think right now it's using ease-in-out, or something similar, for its "timing function".
Try adding this CSS property:
-webkit-animation-timing-function: linear;
2ND EDIT: So now that I see your class declaration it seems the easing is intentional. Since that applies to each phase of the animation though, it needs to be applied a little differently. Here's my full change - you might as well remove the timing function inside of the class:
#-webkit-keyframes PLAY {
0% {
-webkit-transform: translate(0px,0);
-webkit-animation-timing-function: ease-in;
}
50% {
-webkit-transform: rotate(-1080deg) scale(2);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: rotate(-2060deg) scale(1);
}
}
1ST EDIT: Actually, having admired your "Meanwhile, at the batcave...!" animation in my test page for a moment, I think there's a bit more to improve. I'm guessing that the translation is meant to offset the off-center spinning caused by the default "center point" position. So, you can add this CSS property, and remove the translations. Then it's not even dependent on image size.
transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
In fact, the 0% can just be "-webkit-transform: none"
Changed to use the correct cross-browser CSS property
I think I may have hit something above my pay grade with this but.. I'm trying to get 3 rings to circle around in 3D space (similar to electrons around the nucleus of an atom).
Here's a few codes I've tried.
It seems like I can rotate, I can skew, but I can't do both at the same time without a complex matrix equation (and I'm lost on those for now).
Here's an example I made to demonstrate what I'm trying to accomplish in CSS
are you looking for this ? (3d)
http://codepen.io/gcyrillus/pen/aKCuv
animations are delayed and each value of transform are declared.
You need to use wrappers. The HTML:
<!-- language: lang-html -->
<img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate" />
<div class="reversed"><img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate reversed" /></div>
<div class="skew-1"><img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate" /></div>
and the CSS
.skew-1 {
-webkit-transform: scale(1) translateX(10px) translateY(10px) skewX(10deg) skewY(10deg);
}
.skew-2 {
transform: scale(1) translateX(-10px) translateY(-10px) skewX(-10deg) skewY(-10deg);
}
.rotate {
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); }
}
.reversed {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scale(-1.2, -1.1);
-webkit-transform-origin: 200px 200px;
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Codepen: http://www.codepen.io/anon/pen/bEnfK
I have seen the new video in the question. Edited some properties to make it look like the video:
new codepen
I would like to keep the left edge of div.box in the same place during a transformY(-180deg) animation. I can't understand why is it moving. This is the code:
transform-origin: 0% 0%;
transform: rotateY(-180deg);
And here is the live example http://dabblet.com/gist/5551520
You're also transitioning the transform-origin, as you use transition: all, and it is specified in the hover state. The initial value is to be centred.
If you put transform-origin: 0% 0%; on .box it will work as expected.
.box {
/* removed additional styles */
transition: all 600ms linear;
transform-origin: 0% 0%;
}
body:hover .box {
transform: rotateY(-180deg);
}
http://dabblet.com/gist/5551730