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.

Live demo Download

CSS3 Keyframe & Animation code

<style>
  .box-with-text
   {
      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%);
    }
</style>

HTML Code

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

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

Menu Link

13 July, 2015