CSS animation error
I'm trying to create a CSS3-only animation that makes a range (one letter) look like it wobbles back and forth and then falls off the screen as it rotates. Here's my CSS:
@-webkit-keyframes swing {
10% { -webkit-transform: rotate(15deg); }
15% { -webkit-transform: rotate(-10deg); }
20% { -webkit-transform: rotate(5deg); }
25% { -webkit-transform: rotate(-5deg); }
30% { -webkit-transform: rotate(2deg); }
35% { -webkit-transform: rotate(-1deg); }
40% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { -webkit-transform: rotate(15deg); -webkit-transform:translate(0, 1500px); }
}
@keyframes swing {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
}
.animateone {
display: inline-block;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
And here's the result: Result
Why doesn't "A" spin when it falls?
+3
source to share
2 answers
You should write your conversions in one statement:
@keyframes swing {
75% { transform: rotate(700deg) translate(0, 1500px); }
100% { transform: rotate(700deg) translate(0, 1500px); }
}
UPDATED
If you want to rotate when falling, you must use two animations separately:
@keyframes translate {
10% { transform: translate(0, 0); }
15% { transform: translate(0, 0); }
20% { transform: translate(0, 0); }
25% { transform: translate(0, 0); }
30% { transform: translate(0, 0); }
35% { transform: translate(0, 0); }
40% { transform: translate(0, 0); }
75% { transform: translate(0, 1500px); }
100% { transform: translate(0, 1500px); }
}
@keyframes rotate {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(700deg); }
100% { transform: rotate(700deg); }
}
.rotate {
display: inline-block;
animation-name: rotate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
.translate {
display: inline-block;
animation-name: translate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
<header>
<h1>W.I.P.<?h1>
<h2>
A Text
<span class="translate">
<span class="rotate">A</span>
</span>
dventure
</h2>
</header>
0
source to share
First, you can only set the transform property at a time. If you want to concatenate the 2, set them to a separate comma list. (ROX was right about this).
Second, the order of the transforms is important. If you want the frame to move during rotation, the order should be what you see in the fragment.
I also changed the origin of the transform to make it visually smoother and changed the animation to linear for the same reason. Walnut, of course, you can customize it however you want.
@-webkit-keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
@keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
.animateone {
display: inline-block;
-webkit-animation: swing 3s infinite linear;
animation: swing 3s infinite linear;
transform-origin: top center;
}
<span class="animateone">A</a>
0
source to share