CSS3 text animation effect - Mostlikers

13 July, 2015

CSS3 text animation effect

This tutorial I would like share about CSS3 animation effect. Generally, we will use animation script for text fade effects. But you can get same animation effect without using any script. CSS3 style has key frame effect it's providing customization of animation script. Here I have shared How to create CSS3 text animation effect using CSS3.

CSS3 text animation effect

Live demo             Download

CSS3 Keyframe & Animation code

      background-image: -webkit-linear-gradient(#070707 50%, #0D6C88 50%);
      background-repeat: repeat;
      background-position: 0 0;
      background-size: 100% 50px;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-animation: stripes 2s linear infinite;
      animation: stripes 2s linear infinite;
  @-webkit-keyframes stripes {
    100% {
      background-position: 0 -50px;
  @keyframes stripes {
    100% {
      background-position: 0 -50px;

    .box-with-text {      
      white-space: nowrap;
      text-align: center;
      text-transform: uppercase;
      font: bold 30vmax/.40 Open Sans, Impact;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);


<html lang="en">
<title>Page Title</title>
//Include style here
<div class="box-with-text">
Mostlikers - CSS3 text effect

Try it your self >>

Thank you for visiting. if have any queries write your comments below.
"The speed of the leader is the speed of the gang.  "
                                         - Mary Kay Ash

Related Topics

No comments:

Post a Comment