Hot File

Guide to Creating Effect Fade-In, Fade-Out In Text With CSS3 Animation

View: 700    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

8 point/2 review File has been tested

Hello everyone, today codetitle will show you how to do a fade in and fade out over places with CSS3 Animation. The effect is very simple and easy to do, just with the usekeyframe for 7 characters with different time.

Introduction

Hello everyone, today codetitle will show you how to do a fade in and fade out over places with CSS3 Animation. The effect is very simple and easy to do, just with the usekeyframe for 7 characters with different time.

Through this article, make sure you will have experience in creating animations with CSS3.

HTML

You see, each character will have a different fade 200ms, and this loading effect is extremely beautiful. I hope through this article, you'll be able to add creative effects or loading applications right into your own website.
Good luck !

First of all, we need to have 7 characters html format as follows:

<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>

CSS

First, we share the CSS styles for all the characters are as follows:

.letter {
   position: relative;
   top: -webkit-calc(50% - 60px);
   top: calc(50% - 60px);
   text-shadow: 0px 0px 3px white;
}

And this is the key to the whole article, we will create all the animations on each letter as follows:

.letter:nth-child(1) {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
 }
.letter:nth-child(3) {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
 }
.letter:nth-child(4) {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
        -webkit-animation: fade 4s infinite 1400ms;
        animation: fade 4s infinite 1400ms;
}
  
 @-webkit-keyframes fade {
        50% {
            opacity: 0.02;
        }
}
  
 @keyframes fade {
        50% {
            opacity: 0.02;
        }
}

 

Guide to Creating Effect Fade-In, Fade-Out In Text With CSS3 Animation

Guide to Creating Effect Fade-In, Fade-Out In Text With CSS3 Animation Posted on 19-12-2015  Hello everyone, today codetitle will show you how to do a fade in and fade out over places with CSS3 Animation. The effect is very simple and easy to do, just with the usekeyframe for 7 characters with different time. 4/10 700

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd