Simple Text animation using HTML and CSS ( source code ) HTML d i v i n e c t o r CSS body{ background: deeppink; } .wrapper { font-size: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .wrapper span { display: inline-block; font-family: Poppins; font-size: 80px; text-transform: uppercase; font-weight: bold; } .wrapper span:nth-of-type(2) { animation-delay: .05s; } .wrapper span:nth-of-type(3) { animation-delay: .1s; } .wrapper span:nth-of-type(4) { animation-delay: .15s; } .wrapper span:nth-of-type(5) { animation-delay: .2s; } .wrapper span:nth-of-type(6) { animation-delay: .25s; } .wrapper span:nth-of-type(7) { animation-delay: .3s; } .wrapper span:nth-of-type(8) { animation-delay: .35s; } .wrapper span:nth-of-type(9) { animation-delay: .4s; } .wrapper span:nth-of-type(10) { animation-delay: .45s; } .wrapper span { color: #fff; opacity: 0; transform: translate(-155px, 0) scale(.4); animation: animate .5s forwards; } @keyframes animate { 40% { transform: translate(50px, 0) scale(.7); opacity: 1; color: #fff; } 60% { color: wheat; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; } }
Been reading this site for awhile now, always has really good posts and topics please keep it up! loads of blogs are going under lately from lack of new posts etc
ReplyDeleteInfographic Design, Business Infographic Design, Cheap Infographic Design Service
Thanks mate, for visiting the blog
Delete