CSS Keyframes Animation Code Generator

Create an advanced animation using CSS for your HTML web page via this CSS keyframes animation code generator. This CSS animation generator will write CSS code for you by just selecting few options provided below.





( )

Preview

 
 

What is CSS Animation?

A HTML element can progressively switch from one style to another through animation inside your web page. You are free to make as many CSS property changes as you like. You must first specify the animation’s keyframe in order to use CSS animation. The styles that an element will have at specific moments are stored in keyframe. CSS Animation can animate HTML element without using any JavaScript.

CSS Animation Example
Example of CSS Animation by CSS Keyframes Animation Code Generator

What is KeyFrame Selector?

Keyframe selector define percentage of the animation duration. Valid values for keyframe selector can be anything between 0% and 100%. You can have multiple keyframes-selectors in one animation.

@keyframes mykeyframename {
  0% {top: 0px;}
  25% {top: 200px;}
  50% {top: 100px;}
  75% {top: 200px;}
  100% {top: 0px;}
}

We have provided predefined keyframe selectors to create CSS Animation here which you can select from drop down list and generate different types of CSS Animations.

  • Blink – Fast, Slow
  • Bounce – Top, Bottom, Left, Right
  • Jello – Horizontal, Vertical
  • Pulse – Heartbeat, Regular, Ping
  • Shake – Horizontal, Vertical, Rotate, Bottom, Left, Right, Top
  • Scale – Bottom, Center, Left, Right, Top, Horz Center, Horz Left, Horz Right, Vert Bottom, Vert Center, Vert Top
  • Rotate – Bottom, Center, Left, Right, Top
  • Slide – Bottom, Left, Right, Top
  • Swirl – Bottom, Center, Left, Right, Top

Animation Properties

animation: name duration timing-function delay iteration-count direction fill-mode
name
@keyframes name

duration
The total amount of time needed for one cycle of the animation.

timing-function
The length of each cycle and how it evolves in an animation.

delay
The interval between when an element loads and when an animation starts.

iteration-count
Number of times the animation will repeat, or infinite for looping animations.

direction
Whether the animation should move in alternative directions or start over at the beginning of the sequence.

fill-mode
How styles are applied to a target before and after an animation.

You can also use our other CSS tools which can write CSS code for different purpose like CSS Grid Generator or CSS Gradient Code Generator. These are very easy to use tools and write CSS code for your based on your selected options.

You can also refer our blog post to find best CSS frameworks compact in size and lightweight which can help to improve Page Speed of your website.