Let's Learn Something About CSS Animation(s)

Hello Folks,
I'm back with a topic called css animations.
In a website, You might seen something like coming from top or bottom or other side but with animation.
We'll try to do that in this post.
Properties related to animation is posted here:

1. animation
2. animation-play-state
3. animation-direction
4. animation-duration
5. animation-fill-mode
6. animation-iteration-count
7. animation-name
8. animation-delay
9. animation-timing-function

span {
  padding: 1em 2.3em 0.2em 0.3em;
}

• animtion-play-state: running
• animation-direction: normal
• animation-duration: 0s
• animation-fill-mode: none
• animation-iteration-count: 1
• animation-name: none (*I think null)
• animation-delay: 0s
• animation-timing-function: ease

- animation-play-state: running because It should be running until animation-play-state: paused.
- Syntax:

animation: <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>

- The properties are not animatable but It's done by keyframes :)...
- Let's see a example how it works?
- I've made a cool demo in codepen (Which is Cool-Turbo...)
- You can see here that I've animated text-shadow, for 2s animation duration, in linear timing function and the iteration count of the animation is infinite.
- Actually it computed like this,
   -webkit-animation-name: shadow;
   -webkit-animation-duration: 2s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-delay: initial;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: initial;
   -webkit-animation-fill-mode: initial;
- Yeah I'm using -webkit browser and prefix-free enabled in the pen.
- You've to apply vendor prefixes to properties, Also to @keyframes.
- I'm writing the whole code to move a div of .move to top: 25% and left: 25%.

.move {
  position: absolute;
  top: 0;
  left: 0;
  height: 6em;
  width: 6em;
  background: #00b2b3;
  -webkit-animation: go 2s linear infinite;
  -moz-animation: go 2s linear infinite;
  -o-animation: go 2s linear infinite;
  animation: go 2s linear infinite;
}
@-webkit-keyframes go {
  to {
    top: 25%;
    left: 25%;
  }
}
@-moz-keyframes go {
  to {
    top: 25%;
    left: 25%;
  }
}
@-ms-keyframes go {
  to {
    top: 25%;
    left: 25%;
  }
}
@-o-keyframes go {
  to {
    top: 25%;
    left: 25%;
  }
}

@keyframes go {
  to {
    top: 25%;
    left: 25%;
  }
}

- Preview is here,
- I think It'll work in all modern browsers.
- Thanks...Take care...Any queries/Suggestion/Issue warmly welcomed in comments.


Some Resources: