animation media kit for css

code for css file

div.at-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.at-item {
  color: #3079ed;
  animation-name: focus-in-contract;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}
@keyframes focus-in-contract {
  0%{
    letter-spacing: 1em;
    filter: blur(12px);
    opacity: 0;
  }
  100%{
    filter: blur(0);
    opacity: 1;
  }
}

CSS properties allows us to change style of HTML element smoothly. CSS3 introduce two keywords for animation:
@keyframe and animation. Both properties can bind with any HTML element like text, div, span etc.

(1) @keyframe has a collection of CSS style properties. It is like a timeline of CSS styles.
(2) animation property can control keyframes execution sequence.

Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point.

animation properties
name: name of the animation
duration: total running time of animation ( in seconds or milliseconds )
timing-function: change the running speed ( slow start to fast end, fast to slow etc )
delay: wait few seconds or milliseconds before animation start
iteration-count: how many time repeat loop
direction: run animation in normal or reverse direction.
fill-mode: any other style apply to element before animation start or after animation end

code for html file

<div class='at-container'>
  <h1 class='at-item'>Animation
  </h1>
</div>