SVG

Tap to Stop:Start Animation

CSS3

The circle scales down 5%, while also moving down a 250 pixels, then the circle quickly scales back to full size.

Color changes mark the scale and translation transitions from blue to red, then back to blue again.

Translation

CSS3 keyframe attribute-value, transform:translate(0px,256px);, moves an element 1256 pixels downward. Attribute-value transform:translate(0px,-82px); moves an element -82 pixels upward.

Declare Animation

The following CSS3 rule-sets scale, move and fill the color of the letter on this page.

Blue Box

Rule-Set .blueBox declares margins and a border, to surround our animation.

Animation

Rule-Set .animTime declares the keyframes name, duration and easing function.

Key Frames

Key frames, @keyframes anim declare blue and red fills. The transformations scale the circle along the Y axis, while also moving the circle vertically.

.blueBox{
display:block;
margin:0px auto 0px auto;
border:solid 1px blue;
}

.animTime{
text-align:center;
display:block;
clear:both;
fill: blue;
background-color:transparent;
animation: anim 3s infinite;
transition-timing-function: ease-in;
}

@keyframes anim {
0%   {
fill: blue;
transform:scaleY(1); 
}

20%  {
fill: red;
transform: translate(0px, 250px) scaleY(0.05);
}

100% {
fill: blue;
transform:translate(0px, -82px) scaleY(1);
}
}

Download CSS3

Download or view the style sheet that's applied to this animation a-circle.css.

JavaScript

This CSS3 animation applies the same JavaScript as the previous animation. You may also download or view anim-generic.js.

Summary

A blue circle squashes then stretches, with some bounce, back to full size.

You may also download or view the JavaScript file, anim-generic.js, CSS style sheet, a-circle.css and circle SVG file.