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 *