1. Vertical Sliding Animation using CSS
HTML CODE
1 | < h2 class = "sentence" >Top programming languages 2022 |
2 | < div class = "slidingVertical" > |
CSS Code
7 | animation: topToBottom 12.5 s linear infinite 0 s; |
8 | -ms-animation: topToBottom 12.5 s linear infinite 0 s; |
9 | -webkit-animation: topToBottom 12.5 s linear infinite 0 s; |
15 | .slidingVertical span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .slidingVertical span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .slidingVertical span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .slidingVertical span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
37 | @-moz-keyframes topToBottom{ |
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 ); } |
46 | @-webkit-keyframes topToBottom{ |
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 ); } |
55 | @-ms-keyframes topToBottom{ |
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 ); } |
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" > |
CSS Code
6 | .slidingHorizontal span{ |
7 | animation: leftToRight 12.5 s linear infinite 0 s; |
8 | -ms-animation: leftToRight 12.5 s linear infinite 0 s; |
9 | -webkit-animation: leftToRight 12.5 s linear infinite 0 s; |
15 | .slidingHorizontal span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .slidingHorizontal span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .slidingHorizontal span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .slidingHorizontal span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
37 | @-moz-keyframes leftToRight{ |
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 ); } |
46 | @-webkit-keyframes leftToRight{ |
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 ); } |
55 | @-ms-keyframes leftToRight{ |
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 ); } |
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 |
CSS CODE
7 | animation: fadeEffect 12.5 s linear infinite 0 s; |
8 | -ms-animation: fadeEffect 12.5 s linear infinite 0 s; |
9 | -webkit-animation: fadeEffect 12.5 s linear infinite 0 s; |
15 | .fadeIn span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .fadeIn span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .fadeIn span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .fadeIn span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
37 | @-moz-keyframes fadeEffect{ |
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 ); } |
46 | @-webkit-keyframes fadeEffect{ |
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 ); } |
55 | @-ms-keyframes fadeEffect{ |
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 ); } |
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" > |
CSS CODE
7 | animation: vertical 12.5 s linear infinite 0 s; |
8 | -ms-animation: vertical 12.5 s linear infinite 0 s; |
9 | -webkit-animation: vertical 12.5 s linear infinite 0 s; |
15 | .verticalFlip span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .verticalFlip span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .verticalFlip span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .verticalFlip span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
37 | @-moz-keyframes vertical{ |
39 | 5% { opacity: 0 ; -moz-transform: rotateX( 180 deg); } |
40 | 10% { opacity: 1 ; -moz-transform: translateY( 0px ); } |
41 | 25% { opacity: 1 ; -moz-transform: translateY( 0px ); } |
42 | 30% { opacity: 0 ; -moz-transform: translateY( 0px ); } |
46 | @-webkit-keyframes vertical{ |
48 | 5% { opacity: 0 ; -webkit-transform: rotateX( 180 deg); } |
49 | 10% { opacity: 1 ; -webkit-transform: translateY( 0px ); } |
50 | 25% { opacity: 1 ; -webkit-transform: translateY( 0px ); } |
51 | 30% { opacity: 0 ; -webkit-transform: translateY( 0px ); } |
55 | @-ms-keyframes vertical{ |
57 | 5% { opacity: 0 ; -ms-transform: rotateX( 180 deg); } |
58 | 10% { opacity: 1 ; -ms-transform: translateY( 0px ); } |
59 | 25% { opacity: 1 ; -ms-transform: translateY( 0px ); } |
60 | 30% { opacity: 0 ; -ms-transform: translateY( 0px ); } |
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" > |
CSS CODE
7 | animation: horizontal 12.5 s linear infinite 0 s; |
8 | -ms-animation: horizontal 12.5 s linear infinite 0 s; |
9 | -webkit-animation: horizontal 12.5 s linear infinite 0 s; |
15 | .horizontalFlip span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .horizontalFlip span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .horizontalFlip span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .horizontalFlip span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
37 | @-moz-keyframes horizontal{ |
39 | 5% { opacity: 0 ; -moz-transform: rotateY( 180 deg); } |
40 | 10% { opacity: 1 ; -moz-transform: translateX( 0px ); } |
41 | 25% { opacity: 1 ; -moz-transform: translateX( 0px ); } |
42 | 30% { opacity: 0 ; -moz-transform: translateX( 0px ); } |
46 | @-webkit-keyframes horizontal{ |
48 | 5% { opacity: 0 ; -webkit-transform: rotateY( 180 deg); } |
49 | 10% { opacity: 1 ; -webkit-transform: translateX( 0px ); } |
50 | 25% { opacity: 1 ; -webkit-transform: translateX( 0px ); } |
51 | 30% { opacity: 0 ; -webkit-transform: translateX( 0px ); } |
55 | @-ms-keyframes horizontal{ |
57 | 5% { opacity: 0 ; -ms-transform: rotateY( 180 deg); } |
58 | 10% { opacity: 1 ; -ms-transform: translateX( 0px ); } |
59 | 25% { opacity: 1 ; -ms-transform: translateX( 0px ); } |
60 | 30% { opacity: 0 ; -ms-transform: translateX( 0px ); } |
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" > |
CSS CODE
7 | animation: anti 12.5 s linear infinite 0 s; |
8 | -ms-animation: anti 12.5 s linear infinite 0 s; |
9 | -webkit-animation: anti 12.5 s linear infinite 0 s; |
15 | .antiClock span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .antiClock span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .antiClock span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .antiClock span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
39 | 5% { opacity: 0 ; -moz-transform: rotateX( 180 deg); } |
40 | 10% { opacity: 1 ; -moz-transform: translateY( 0px ); } |
41 | 25% { opacity: 1 ; -moz-transform: translateY( 0px ); } |
42 | 30% { opacity: 0 ; -moz-transform: translateY( 0px ); } |
46 | @-webkit-keyframes anti{ |
48 | 5% { opacity: 0 ; -webkit-transform: rotate( 180 deg); } |
49 | 10% { opacity: 1 ; -webkit-transform: translateY( 0px ); } |
50 | 25% { opacity: 1 ; -webkit-transform: translateY( 0px ); } |
51 | 30% { opacity: 0 ; -webkit-transform: translateY( 0px ); } |
57 | 5% { opacity: 0 ; -ms-transform: rotate( 180 deg); } |
58 | 10% { opacity: 1 ; -ms-transform: translateY( 0px ); } |
59 | 25% { opacity: 1 ; -ms-transform: translateY( 0px ); } |
60 | 30% { opacity: 0 ; -ms-transform: translateY( 0px ); } |
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" > |
CSS CODE
7 | animation: clock 12.5 s linear infinite 0 s; |
8 | -ms-animation: clock 12.5 s linear infinite 0 s; |
9 | -webkit-animation: clock 12.5 s linear infinite 0 s; |
15 | .clockWise span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .clockWise span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .clockWise span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .clockWise span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
39 | 5% { opacity: 0 ; -moz-transform: rotate( -180 deg); } |
40 | 10% { opacity: 1 ; -moz-transform: translateX( 0px ); } |
41 | 25% { opacity: 1 ; -moz-transform: translateX( 0px ); } |
42 | 30% { opacity: 0 ; -moz-transform: translateX( 0px ); } |
46 | @-webkit-keyframes clock{ |
48 | 5% { opacity: 0 ; -webkit-transform: rotate( -180 deg); } |
49 | 10% { opacity: 1 ; -webkit-transform: translateX( 0px ); } |
50 | 25% { opacity: 1 ; -webkit-transform: translateX( 0px ); } |
51 | 30% { opacity: 0 ; -webkit-transform: translateX( 0px ); } |
57 | 5% { opacity: 0 ; -ms-transform: rotate( -180 deg); } |
58 | 10% { opacity: 1 ; -ms-transform: translateX( 0px ); } |
59 | 25% { opacity: 1 ; -ms-transform: translateX( 0px ); } |
60 | 30% { opacity: 0 ; -ms-transform: translateX( 0px ); } |
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" > |
CSS CODE
7 | animation: pop 12.5 s linear infinite 0 s; |
8 | -ms-animation: pop 12.5 s linear infinite 0 s; |
9 | -webkit-animation: pop 12.5 s linear infinite 0 s; |
15 | .popEffect span:nth-child( 2 ){ |
16 | animation-delay: 2.5 s; |
17 | -ms-animation-delay: 2.5 s; |
18 | -webkit-animation-delay: 2.5 s; |
20 | .popEffect span:nth-child( 3 ){ |
22 | -ms-animation-delay: 5 s; |
23 | -webkit-animation-delay: 5 s; |
25 | .popEffect span:nth-child( 4 ){ |
26 | animation-delay: 7.5 s; |
27 | -ms-animation-delay: 7.5 s; |
28 | -webkit-animation-delay: 7.5 s; |
30 | .popEffect span:nth-child( 5 ){ |
32 | -ms-animation-delay: 10 s; |
33 | -webkit-animation-delay: 10 s; |
39 | 5% { opacity: 0 ; -moz-transform: rotate( 0 deg) scale( 0.10 ) skew( 0 deg) 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 ); } |
46 | @-webkit-keyframes pop{ |
48 | 5% { opacity: 0 ; -webkit-transform: rotate( 0 deg) scale( 0.10 ) skew( 0 deg) 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 ); } |
57 | 5% { opacity: 0 ; -ms-transform: rotate( 0 deg) scale( 0.10 ) skew( 0 deg) 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 ); } |
Result – PopEffect Text Animation using CSS
Top programming languages 2022
Python.
C.
C++
C#
Java.
Download Source Code
Animation using CSS
About Post Author