Hello friends, today I am sharing a beautiful Animated Text Using Css Only effect where I just played little bit pseudo element in css using css3 advance properties to produce this Text Animation.
Here in beautiful text animation I am counting each letter used here to apply a specific animation time to each letter so that we can arrange their animation like they are randomly bouncing with animation property Bounce as showing in code animation: bounce .3s ease infinite alternate;
Pseudo Element used to provide each letter different animation time as you can see in code given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; } h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; } h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; } h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; } h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; } h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; } h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; } h1 span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; } h1 span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; } h1 span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; } h1 span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } h1 span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } h1 span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } |
As you can see in above code each span element has different animation time to produce jig jag effect in text animation.
Before sharing more detailed coding I would like to share my two recent articles that will also will be helpful for you:
Now, let’s start coding in more details :
HTML Structure:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h1> <span>c</span> <span>s</span> <span>s</span> <span>3</span><br> <span>T</span> <span>r</span> <span>a</span> <span>n</span> <span>s</span> <span>i</span> <span>t</span> <span>i</span> <span>o</span> <span>n</span> </h1> |
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
html, body { width: 100%; height: 100%; background: #76b852; background: -webkit-linear-gradient(to left, #76b852 , #8DC26F); background: -webkit-linear-gradient(right, #76b852 , #8DC26F); background: linear-gradient(to left, #76b852 , #8DC26F); overflow: hidden; -webkit-font-smoothing: antialiased; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } h1 { text-align:center; } h1 span { position: relative; top: 20px; display: inline-block; -webkit-animation: bounce .3s ease infinite alternate; animation: bounce .3s ease infinite alternate; font-family: 'Titan One', cursive; font-size: 80px; line-height:110px; color: #FFF; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 0 transparent, 0 11px 0 transparent, 0 12px 0 transparent, 0 13px 0 transparent, 0 14px 0 transparent, 0 15px 0 transparent, 0 10px 10px rgba(0, 0, 0, .4); } h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; } h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; } h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; } h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; } h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; } h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; } h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; } h1 span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; } h1 span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; } h1 span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; } h1 span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } h1 span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } h1 span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } @-webkit-keyframes bounce { 100% { top: -20px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 10px 0 #CCC, 0 11px 0 #CCC, 0 12px 0 #CCC, 0 13px 0 #CCC, 0 14px 0 #CCC, 0 15px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2); } } @keyframes bounce { 100% { top: -20px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 10px 0 #CCC, 0 11px 0 #CCC, 0 12px 0 #CCC, 0 13px 0 #CCC, 0 14px 0 #CCC, 0 15px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2); } } |