CSS Animation Error - html

Question

I am trying to create a CSS3 only animation that makes a span (one letter) look like it swings back and forth and then falls off the screen while turning. Here is 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 is the result: Result
Why isn't the 'A' rotating as it falls?

Answer 1

You should write your transforms into a single statement:
#keyframes swing {
75% { transform: rotate(700deg) translate(0, 1500px); }
100% { transform: rotate(700deg) translate(0, 1500px); }
}
UPDATED
If you want rotate when falling, you should 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>

Answer 2

In first place, you can only set a transform property at a time. If you want to combine 2, set them in a comma separate list. (ROX was right about this).
In the second place, order of the transforms is important. If you want the span to move while rotating, the order must be the one that you see in the snippet.
I have also changed the transform origin, to make it visually more smooth, and changed the animation to linear for the same reason. Nut of course you can adjust it as 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>