Sat. Apr 5th, 2025

sarveshpathak.com

Code Snippets, Tutorials, Articles, Technical Stuff

Create Advance Text Animation using CSS and HTML

6 min read
Animation using CSS

Animation using CSS

1. Vertical Sliding Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2    <div class="slidingVertical">
3      <span>Python.</span>
4      <span>C. </span>
5      <span>C++ </span>
6      <span> C#  </span>
7      <span> Java. </span>     
8    </div>
9  </h2>

CSS Code

1/*Vertical Sliding*/
2.slidingVertical{
3    display: inline;
4    text-indent: 8px;
5}
6.slidingVertical span{
7    animation: topToBottom 12.5s linear infinite 0s;
8    -ms-animation: topToBottom 12.5s linear infinite 0s;
9    -webkit-animation: topToBottom 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.slidingVertical span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.slidingVertical span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.slidingVertical span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.slidingVertical span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*topToBottom Animation*/
37@-moz-keyframes topToBottom{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: translateY(-50px); }
40    10% { opacity: 1; -moz-transform: translateY(0px); }
41    25% { opacity: 1; -moz-transform: translateY(0px); }
42    30% { opacity: 0; -moz-transform: translateY(50px); }
43    80% { opacity: 0; }
44    100% { opacity: 0; }
45}
46@-webkit-keyframes topToBottom{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: translateY(-50px); }
49    10% { opacity: 1; -webkit-transform: translateY(0px); }
50    25% { opacity: 1; -webkit-transform: translateY(0px); }
51    30% { opacity: 0; -webkit-transform: translateY(50px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes topToBottom{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: translateY(-50px); }
58    10% { opacity: 1; -ms-transform: translateY(0px); }
59    25% { opacity: 1; -ms-transform: translateY(0px); }
60    30% { opacity: 0; -ms-transform: translateY(50px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result-Vertical Sliding Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

2. Horizontal Sliding Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2    <div class="slidingHorizontal">
3      <span>Python.</span>
4      <span>C. </span>
5      <span>C++ </span>
6      <span> C#  </span>
7      <span> Java. </span>
8    </div>
9  </h2>

CSS Code

1/*Horizontal Sliding*/
2.slidingHorizontal{
3    display: inline;
4    text-indent: 8px;
5}
6.slidingHorizontal span{
7    animation: leftToRight 12.5s linear infinite 0s;
8    -ms-animation: leftToRight 12.5s linear infinite 0s;
9    -webkit-animation: leftToRight 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.slidingHorizontal span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.slidingHorizontal span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.slidingHorizontal span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.slidingHorizontal span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*leftToRight Animation*/
37@-moz-keyframes leftToRight{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: translateX(-50px); }
40    10% { opacity: 1; -moz-transform: translateX(0px); }
41    25% { opacity: 1; -moz-transform: translateX(0px); }
42    30% { opacity: 0; -moz-transform: translateX(50px); }
43    80% { opacity: 0; }
44    100% { opacity: 0; }
45}
46@-webkit-keyframes leftToRight{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: translateX(-50px); }
49    10% { opacity: 1; -webkit-transform: translateX(0px); }
50    25% { opacity: 1; -webkit-transform: translateX(0px); }
51    30% { opacity: 0; -webkit-transform: translateX(50px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes leftToRight{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: translateX(-50px); }
58    10% { opacity: 1; -ms-transform: translateX(0px); }
59    25% { opacity: 1; -ms-transform: translateX(0px); }
60    30% { opacity: 0; -ms-transform: translateX(50px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result-Horizontal Sliding Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

3. FadeIn Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2   <div class="fadeIn">
3     <span>Python.</span>
4     <span>C. </span>
5     <span>C++ </span>
6     <span> C#  </span>
7     <span> Java. </span>
8   </div>
9 </h2>

CSS CODE

1/*FadeIn*/
2.fadeIn{
3    display: inline;
4    text-indent: 8px;
5}
6.fadeIn span{
7    animation: fadeEffect 12.5s linear infinite 0s;
8    -ms-animation: fadeEffect 12.5s linear infinite 0s;
9    -webkit-animation: fadeEffect 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.fadeIn span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.fadeIn span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.fadeIn span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.fadeIn span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*FadeIn Animation*/
37@-moz-keyframes fadeEffect{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: translateY(0px); }
40    10% { opacity: 1; -moz-transform: translateY(0px); }
41    25% { opacity: 1; -moz-transform: translateY(0px); }
42    30% { opacity: 0; -moz-transform: translateY(0px); }
43    80% { opacity: 0; }
44    100% { opacity: 0; }
45}
46@-webkit-keyframes fadeEffect{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: translateY(0px); }
49    10% { opacity: 1; -webkit-transform: translateY(0px); }
50    25% { opacity: 1; -webkit-transform: translateY(0px); }
51    30% { opacity: 0; -webkit-transform: translateY(0px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes fadeEffect{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: translateY(0px); }
58    10% { opacity: 1; -ms-transform: translateY(0px); }
59    25% { opacity: 1; -ms-transform: translateY(0px); }
60    30% { opacity: 0; -ms-transform: translateY(0px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result –FadeIn Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

4. Vertical Flip Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2   <div class="verticalFlip">
3     <span>Python.</span>
4     <span>C. </span>
5     <span>C++ </span>
6     <span> C#  </span>
7     <span> Java. </span>
8   </div>
9 </h2>

CSS CODE

1/*Vertical Flip*/
2.verticalFlip{
3    display: inline;
4    text-indent: 8px;
5}
6.verticalFlip span{
7    animation: vertical 12.5s linear infinite 0s;
8    -ms-animation: vertical 12.5s linear infinite 0s;
9    -webkit-animation: vertical 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.verticalFlip span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.verticalFlip span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.verticalFlip span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.verticalFlip span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*Vertical Flip Animation*/
37@-moz-keyframes vertical{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: rotateX(180deg); }
40    10% { opacity: 1; -moz-transform: translateY(0px); }
41    25% { opacity: 1; -moz-transform: translateY(0px); }
42    30% { opacity: 0; -moz-transform: translateY(0px); }
43    80% { opacity: 0; }
44    100% { opacity: 0;}
45}
46@-webkit-keyframes vertical{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: rotateX(180deg); }
49    10% { opacity: 1; -webkit-transform: translateY(0px); }
50    25% { opacity: 1; -webkit-transform: translateY(0px); }
51    30% { opacity: 0; -webkit-transform: translateY(0px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes vertical{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: rotateX(180deg); }
58    10% { opacity: 1; -ms-transform: translateY(0px); }
59    25% { opacity: 1; -ms-transform: translateY(0px); }
60    30% { opacity: 0; -ms-transform: translateY(0px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result –Vertical Flip Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

5. Horizontal Flip Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2   <div class="horizontalFlip">
3     <span>Python.</span>
4     <span>C. </span>
5     <span>C++ </span>
6     <span> C#  </span>
7     <span> Java. </span>
8   </div>
9 </h2>

CSS CODE

1/*Horizontal Flip*/
2.horizontalFlip{
3    display: inline;
4    text-indent: 8px;
5}
6.horizontalFlip span{
7    animation: horizontal 12.5s linear infinite 0s;
8    -ms-animation: horizontal 12.5s linear infinite 0s;
9    -webkit-animation: horizontal 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.horizontalFlip span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.horizontalFlip span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.horizontalFlip span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.horizontalFlip span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*Horizontal Flip Animation*/
37@-moz-keyframes horizontal{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: rotateY(180deg); }
40    10% { opacity: 1; -moz-transform: translateX(0px); }
41    25% { opacity: 1; -moz-transform: translateX(0px); }
42    30% { opacity: 0; -moz-transform: translateX(0px); }
43    80% { opacity: 0; }
44    100% { opacity: 0;}
45}
46@-webkit-keyframes horizontal{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: rotateY(180deg); }
49    10% { opacity: 1; -webkit-transform: translateX(0px); }
50    25% { opacity: 1; -webkit-transform: translateX(0px); }
51    30% { opacity: 0; -webkit-transform: translateX(0px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes horizontal{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: rotateY(180deg); }
58    10% { opacity: 1; -ms-transform: translateX(0px); }
59    25% { opacity: 1; -ms-transform: translateX(0px); }
60    30% { opacity: 0; -ms-transform: translateX(0px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result –Horizontal Flip Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

6. AntiClock Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2  <div class="antiClock">
3     <span>Python.</span>
4     <span>C. </span>
5     <span>C++ </span>
6     <span> C#  </span>
7     <span> Java. </span>
8   </div>
9 </h2>

CSS CODE

1/*AntiClockWise Effect*/
2.antiClock{
3    display: inline;
4    text-indent: 8px;
5}
6.antiClock span{
7    animation: anti 12.5s linear infinite 0s;
8    -ms-animation: anti 12.5s linear infinite 0s;
9    -webkit-animation: anti 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.antiClock span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.antiClock span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.antiClock span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.antiClock span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*AntiClockWise Effect Animation*/
37@-moz-keyframes anti{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: rotateX(180deg); }
40    10% { opacity: 1; -moz-transform: translateY(0px); }
41    25% { opacity: 1; -moz-transform: translateY(0px); }
42    30% { opacity: 0; -moz-transform: translateY(0px); }
43    80% { opacity: 0; }
44    100% { opacity: 0;}
45}
46@-webkit-keyframes anti{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: rotate(180deg); }
49    10% { opacity: 1; -webkit-transform: translateY(0px); }
50    25% { opacity: 1; -webkit-transform: translateY(0px); }
51    30% { opacity: 0; -webkit-transform: translateY(0px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes anti{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: rotate(180deg); }
58    10% { opacity: 1; -ms-transform: translateY(0px); }
59    25% { opacity: 1; -ms-transform: translateY(0px); }
60    30% { opacity: 0; -ms-transform: translateY(0px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result-AntiClock Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

7. ClockWise Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2   <div class="clockWise">
3     <span>Python.</span>
4     <span>C. </span>
5     <span>C++ </span>
6     <span> C#  </span>
7     <span> Java. </span>
8   </div>
9 </h2>

CSS CODE

1/*ClockWise Effect*/
2.clockWise{
3    display: inline;
4    text-indent: 8px;
5}
6.clockWise span{
7    animation: clock 12.5s linear infinite 0s;
8    -ms-animation: clock 12.5s linear infinite 0s;
9    -webkit-animation: clock 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.clockWise span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.clockWise span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.clockWise span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.clockWise span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*ClockWise Effect Animation*/
37@-moz-keyframes clock{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: rotate(-180deg); }
40    10% { opacity: 1; -moz-transform: translateX(0px); }
41    25% { opacity: 1; -moz-transform: translateX(0px); }
42    30% { opacity: 0; -moz-transform: translateX(0px); }
43    80% { opacity: 0; }
44    100% { opacity: 0;}
45}
46@-webkit-keyframes clock{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: rotate(-180deg); }
49    10% { opacity: 1; -webkit-transform: translateX(0px); }
50    25% { opacity: 1; -webkit-transform: translateX(0px); }
51    30% { opacity: 0; -webkit-transform: translateX(0px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes clock{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: rotate(-180deg); }
58    10% { opacity: 1; -ms-transform: translateX(0px); }
59    25% { opacity: 1; -ms-transform: translateX(0px); }
60    30% { opacity: 0; -ms-transform: translateX(0px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result –ClockWise Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

8. PopEffect Animation using CSS

HTML CODE

1<h2 class="sentence">Top programming languages 2022
2    <div class="popEffect">
3     <span>Python.</span>
4     <span>C. </span>
5     <span>C++ </span>
6     <span> C#  </span>
7     <span> Java. </span>
8   </div>
9 </h2>

CSS CODE

1/*Pop Effect*/
2.popEffect{
3    display: inline;
4    text-indent: 8px;
5}
6.popEffect span{
7    animation: pop 12.5s linear infinite 0s;
8    -ms-animation: pop 12.5s linear infinite 0s;
9    -webkit-animation: pop 12.5s linear infinite 0s;
10    color: #00abe9;
11    opacity: 0;
12    overflow: hidden;
13    position: absolute;
14}
15.popEffect span:nth-child(2){
16    animation-delay: 2.5s;
17    -ms-animation-delay: 2.5s;
18    -webkit-animation-delay: 2.5s;
19}
20.popEffect span:nth-child(3){
21    animation-delay: 5s;
22    -ms-animation-delay: 5s;
23    -webkit-animation-delay: 5s;
24}
25.popEffect span:nth-child(4){
26    animation-delay: 7.5s;
27    -ms-animation-delay: 7.5s;
28    -webkit-animation-delay: 7.5s;
29}
30.popEffect span:nth-child(5){
31    animation-delay: 10s;
32    -ms-animation-delay: 10s;
33    -webkit-animation-delay: 10s;
34}
35 
36/*Pop Effect Animation*/
37@-moz-keyframes pop{
38    0% { opacity: 0; }
39    5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
40    10% { opacity: 1; -moz-transform: translateY(0px); }
41    25% { opacity: 1; -moz-transform: translateY(0px); }
42    30% { opacity: 0; -moz-transform: translateY(0px); }
43    80% { opacity: 0; }
44    100% { opacity: 0;}
45}
46@-webkit-keyframes pop{
47    0% { opacity: 0; }
48    5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
49    10% { opacity: 1; -webkit-transform: translateY(0px); }
50    25% { opacity: 1; -webkit-transform: translateY(0px); }
51    30% { opacity: 0; -webkit-transform: translateY(0px); }
52    80% { opacity: 0; }
53    100% { opacity: 0; }
54}
55@-ms-keyframes pop{
56    0% { opacity: 0; }
57    5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
58    10% { opacity: 1; -ms-transform: translateY(0px); }
59    25% { opacity: 1; -ms-transform: translateY(0px); }
60    30% { opacity: 0; -ms-transform: translateY(0px); }
61    80% { opacity: 0; }
62    100% { opacity: 0; }
63}

Result – PopEffect Text Animation using CSS

Top programming languages 2022
Python. C. C++ C# Java.

Download Source Code

Animation using CSS
Animation using CSS

About Post Author

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.