Freelance Web/Graphic designer, photographer & community campaigner
Code Snippets

CSS Animation

Below is CSS which you can use to create a simple animation that relies on keyframes. Each rule for @keyframes defines what should happen during the animation with 0% the beginning of the animation and 100% the end of the animation.

@keyframes stretch {
  /* actions fro animation is declared here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/* is the same as: */

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0
    alternate
    infinite
    none
    running;
}

Here is the HTML and CSS you will need to create a simple animation that expands and morphs a circle into a square.

See the Pen Flat minion by Design Fife (@designfife) on CodePen
1

Article written by:

Tech geekery, blogging, volunteering, graphic/web design, photography, digital activism and community-based campaigns are some of the things that I am passionate about.

Leave a Reply

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