In this tutorial/explanation we'll be going over how to use keyframe animations to make text appear to animate Up and over the X axis.
Understanding that we're using separate <div> separators for this, it can be done with <span> and the :nth operator in CSS.
To start we'll wrap our content
I prefer to wrap all of my separate elements for simplicity in organization.
Now we'll create our letters inside of our wrapper.
We added the id tag inside our div to give our divider tags a common css element.
We are going to want our letters to lineup in the middle of the page, for this exercise.
We'll be centering the wrap class and giving the letter id an element called display.
Inline-block is to treat each letter as a separate block, however if we used just say block, this would remove the space between the letters and treat them as I suppose you could think of them as letters or sentences depending on how much content is in the divider.
Now let's create our animation.
The transform property is to manipulate the text, I'll go over the transform, translate, and other animation methods in the future in more detail, rotateX will rotate the letter over the X axis which is up and down.
0 degrees is straight up, 200deg may not be exactly upside down but it's close enough for this exercise.
Now we just need to give our letters their css in the page, I did this a bit more typing but could be done by putting the animation details under the #letter id.
I show only two letters right now, but it's just to show you the animation-delay increases by .25s every letter to give it a "flowing" animation.
Now that you've gotten this quick lesson I want to see what you can come up with! If you'd like more tutorials please leave a comment and I'd love to create them
Understanding that we're using separate <div> separators for this, it can be done with <span> and the :nth operator in CSS.
To start we'll wrap our content
Code:
[color=#111111]<div class="wrap">
</div>I prefer to wrap all of my separate elements for simplicity in organization.
Now we'll create our letters inside of our wrapper.
Code:
[color=#111111]<div class="wrap">
<div class="p" id="letter">
P
</div>
<div class="s" id="letter">
s
</div>
<div class="y" id="letter">
y
</div>
<div class="c" id="letter">
c
</div>
<div class="h" id="letter">
h
</div>
<div class="o" id="letter">
o
</div>
</div>We are going to want our letters to lineup in the middle of the page, for this exercise.
We'll be centering the wrap class and giving the letter id an element called display.
Code:
[color=#111111].wrap{
text-align:center;
width:100%;
font-size:25px;
}
#letter{
display:inline-block;
}Now let's create our animation.
Code:
[color=#111111]@keyframes upandover{[/color]
from{transform:rotateX(200deg)}
to{transform:rotateX(0deg)}
}
[color=#111111]0 degrees is straight up, 200deg may not be exactly upside down but it's close enough for this exercise.
Now we just need to give our letters their css in the page, I did this a bit more typing but could be done by putting the animation details under the #letter id.
Code:
[color=#111111].p{[/color]
transform:rotateX(200deg);
animation:upandover;
animation-duration:.55s;
animation-iteration-count:1;
animation-fill-mode:both;
cursor:normal;
}
[color=#111111]
.s{[/color]
transform:rotateX(200deg);
animation:upandover;
animation-duration:.55s;
animation-iteration-count:1;
animation-fill-mode:both;
cursor:normal;
animation-delay:.25s;
}
[color=#111111]Now that you've gotten this quick lesson I want to see what you can come up with! If you'd like more tutorials please leave a comment and I'd love to create them