KeyFrames Animation in CSS

KeyFrames Animation in CSS

Introduction

Today in this topic we just create Some animation balls by using CSS. We provide all Codes under the section. We simply make this by the help of KeyFrames.

Keyframes is mostly use in CSS to animate anything. We provide also demo which will helps you to understand better.

Demo

This is a keyframes Animation

---

Set Up

• open your Compiler
• create a new file with .html extension
• copy all Codes which is under below
• save the file and Run !!

Copy All Codes carefully and Paste.

<style>

.box-size {

  padding: 3px;

  text-align: center;

  border: solid black 2px;

  border-radius: 10px;

  background: #9bf4fa;

}

  .keymovemt {

    height: 50px;

    width: 50px;

    border-radius: 30px;

    background: red;

    animation: move 5s infinite;

    position: relative;

  }

  

  @keyframes move {

   0%   {top: 0px; left: 0px; background: red;}

  25%  {top: 0px; left: 85%; background: black;}

  50%  {top: 100px; left: 85%; background: dodgerblue;}

  75%  {top: 100px; left: 0px; background: green;}

  100% {top: 0px; left: 0px; background: red;}

}

</style>


<div class="box-size">

<h1>This is a keyframes Animation</h1>

<hr/>

<div class="keymovemt">

</div>

<br /><br /><br /><br /><br /><br />

</div>

I Hope You Enjoy this Article, More CSS Update will Coming soon. So Stay ready and Follow Our Blog. Also You can Follow Us On Social Media.