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