Basic font-size animation

In this example below you will see how to do a Basic font-size animation with some HTML / CSS and Javascript

Getting my head around keyframe animations

Thumbnail
This awesome code was written by cfed, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cfed ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Basic font-size animation</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @-webkit-keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 30px;
  }
  100% {
    font-size: 10px;
  }
}
.box {
  -webkit-animation: fontbulger 2s infinite;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="box">This is a box</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/cfed/basic-font-size-animation-AaDlq */
@-webkit-keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 30px;
  }
  100% {
    font-size: 10px;
  }
}
.box {
  -webkit-animation: fontbulger 2s infinite;
}

Comments