Smooth Appear and Disappear Text Animation as title described a lot you can simply guess very easily in this article you are going to get something text animation or smooth text transition using advance css properties.
Yes, you are guessing correct it is a Text Animation where text background color, text shadow and transition properties are set in this way that you will get effect like text letter getting fade in and fade out like it is getting desolve in it and coming out continuesly in a continues manner. This is repetitive animation.
As in my previous Article I have shared a Fullscreen Slideshow Using CSS3 where images where smoothly getting fade in and fade out same like this you check it too how it was working.
Here each text letter having common animation properties and its value separated by animation-delay property of advance css.
Lets start coding:
HTML Structure:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="words words-1"> <span>S</span> <span>H</span> <span>O</span> <span>W</span> </div> <div class="words words-1"> <span>A</span> <span>N</span> <span>D</span> </div> <div class="words words-1"> <span>C</span> <span>S</span> <span>S</span> <span>3</span> </div> |
CSS stylesheet:
|
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 |
@import "https://fonts.googleapis.com/css?family=Rubik+Mono+One"; body { background: #1ABC9C; overflow-x: hidden; font-family: 'Rubik Mono One', sans-serif; padding: 120px; text-align: center; } .words { color: #1ABC9C; font-size: 0; line-height: 1; } .words span { font-size: 120px; display: inline-block; -webkit-animation: move 2s ease-in-out infinite; animation: move 2s ease-in-out infinite; } .words span:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .words span:nth-child(3) { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; } .words span:nth-child(4) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } @-webkit-keyframes move { 0% { -webkit-transform: translate(-33%, 0); transform: translate(-33%, 0); } 50% { text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } 100% { -webkit-transform: translate(33%, 0); transform: translate(33%, 0); } } @keyframes move { 0% { -webkit-transform: translate(-33%, 0); transform: translate(-33%, 0); } 50% { text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } 100% { -webkit-transform: translate(33%, 0); transform: translate(33%, 0); } } * { box-sizing: border-box; } |