By use of CSS Animation we can change or rotate most parts of a sentence.
Hello friends in this post you will see how to create typography effects. Here I am going to rotate some part from a sentence. We will exchange words to another words using CSS Animations.
Please Note: these results can be seen only those browers who supports CSS Animations.
before briefing i am going to share my previous article quick link hope you get benifit from which is Awesome Subtle Click Feedback Effects and How to Fixed Table Header Using CSS.
So let’s start!
In the following, we’ll be going through demo 2.
The Markup
Here we have a main wrapper with a title tag h2 heading which will contain leve frist spans and tow divs for the rotating words:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <section class="rw-wrapper"> <h2 class="rw-sentence"> <span>Real poetry is like</span> <span>creating</span> <div class="rw-words rw-words-1"> <span>breathtaking moments</span> <span>lovely sounds</span> <span>incredible magic</span> <span>unseen experiences</span> <span>happy feelings</span> <span>beautiful butterflies</span> </div> <br /> <span>with a silent touch of</span> <div class="rw-words rw-words-2"> <span>sugar</span> <span>spice</span> <span>colors</span> <span>happiness</span> <span>wonder</span> <span>happiness</span> </div> </h2> </section> |
Now, ignoring the trash placeholder text, we throbbing each span of the rw-word to appear at a time. For that well be using CSS animations. Well make one animation for each divs will and each span will manage it, just considering exchange delays.
So, let’s look at the CSS.
The CSS3
First, we will style the main wrapper and middle it upon the page:
1 2 3 4 5 6 7 | .rw-wrapper{ width: 80%; position: relative; margin: 110px auto 0 auto; font-family: 'Bree Serif'; padding: 10px; } |
Well be credited gone some text shadow to all the elements in the heading:
1 2 3 4 5 | .rw-sentence{ margin: 0; text-align: left; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } |
And merger some specific text styling to the spans:
1 2 3 4 5 6 | .rw-sentence span{ color: #444; white-space: nowrap; font-size: 200%; font-weight: normal; } |
The divisions will be displayed as inline elements, that will allow for entry us to put in them into the sentence without breaking the flow:
1 2 3 4 | .rw-words{ display: inline; text-indent: 10px; } |
Each span inside of a rw-words div will be positioned absolutely and well conceal any overflow:
1 2 3 4 5 6 7 | .rw-words span{ position: absolute; opacity: 0; overflow: hidden; width: 100%; color: #6b969d; } |
Now, well control two animations. As mentioned forward, well control the same animation for all the spans in one div, just back alternating delays:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .rw-words-1 span{ animation: rotateWordsFirst 18s linear infinite 0s; } .rw-words-2 span{ animation: rotateWordsSecond 18s linear infinite 0s; } .rw-words span:nth-child(2) { animation-delay: 3s; color: #6b889d; } .rw-words span:nth-child(3) { animation-delay: 6s; color: #6b739d; } .rw-words span:nth-child(4) { animation-delay: 9s; color: #7a6b9d; } .rw-words span:nth-child(5) { animation-delay: 12s; color: #8d6b9d; } .rw-words span:nth-child(6) { animation-delay: 15s; color: #9b6b9d; } |
Our animations will control one cycle, meaning that each span will be shown also for three seconds, therefore the defer value. The whole animation will control 6 (number of images) * 3 (freshen grow pass) = 18 seconds.
We will exaggeration to set the right percentage for the opacity value (or all makes the span appear). Dividing 6 by 18 gives us 0.333 which would be 33% for our keyframe step. Everything that we hurting to happen to the span needs to happen past that. So, after tweaking and seeing what fits best, we come happening taking into account the when animation for the first words:
1 2 3 4 5 6 7 | @keyframes rotateWordsFirst { 0% { opacity: 1; animation-timing-function: ease-in; height: 0px; } 8% { opacity: 1; height: 60px; } 19% { opacity: 1; height: 60px; } 25% { opacity: 0; height: 60px; } 100% { opacity: 0; } } |
Well fade in the span and well furthermore lively its peak.
The openness for the words in the second div will fade in and animated their width. We supplementary a bit to the keyframe step percentages here, because we tormented sensation these words to appear just a little bit fused than the ones of the first word:
1 2 3 4 5 6 7 | @keyframes rotateWordsSecond { 0% { opacity: 1; animation-timing-function: ease-in; width: 0px; } 10% { opacity: 0.3; width: 0px; } 20% { opacity: 1; width: 100%; } 27% { opacity: 0; width: 100%; } 100% { opacity: 0; } } |
And thats it folks! There are many possibilities for the animations, you can check out the added demos and see what can be applied!
Demos
- Demo 1: Animate down
- Demo 2: Animate height and width
- Demo 3: Fade in and “fall”
- Demo 4: Animate width and fly in
- Demo 5: Rotate in 3D and “sharpen”
I hope you enjoyed this tutorial and find it inspiring!