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
– The animation(1st) property is shorthand property for 2-8 properties.
– Shorthand properties means you can declare many properties in just one property like margin, padding, border etc.
– Example:
span {
  padding: 1em 2.3em 0.2em 0.3em;
}
– So 1em will be set to padding-top, 2.3em will be set to padding-right, 0.2em will be set to padding-bottom and 0.3em will be set to padding-left. (Cool right!!)
– What’s the initial value of these properties :
  • 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…)

See the Pen Cool-Turbo by kaushalya (@kman) on CodePen

– 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,

See the Pen Demo for seebeetee by kaushalya (@kman) on CodePen

– I think It’ll work in all modern browsers.
– Thanks…Take care…Any queries/Suggestion/Issue warmly welcomed in comments.

Some Resources:

MDN    
CSS-TRICKS    
CSS3 Specification

Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *