Simple Arrow Animation using CSS Class


Simple Arrow animation using html and css.

Arrow Blink
Arrow delay animation
Arrow animation duration

HTML :

   <p class="txt3">We <i class="fas fa-arrow-right blink"></i> Design <i class="fas fa-arrow-right blink1"></i> Build <i class="fas fa-arrow-right blink2"></i> Launch <i class="fas fa-arrow-right blink3"></i> Modify</p>

 CSS :

.blink{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
-webkit-animation-delay:  0.8s;
}

.blink1{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 1.2s;
}
.blink2{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 1.6s;
}

.blink3{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 2.0s;
}


No comments:

Post a Comment

Pages