SVG

Tap to Stop:Start Animation

CSS3

The letter scales down while also moving down, then the character 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,245px);, moves an element 245 pixels downward.

The origin, or transformation point, on this letter is at the top. Default scaling along the vertical axis shrinks and increases the height while maintaining the top of the letter at the top of its containing view box, unless you move the letter down while scaling.

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 the margins to surround our animation. Originally the letter was surrounded by a box with blue border.

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 letter along the Y axis, while also moving the letter downward.

.blueBox{

display:block;

margin:0px auto 0px auto;

}

.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, 245px) scaleY(0.05);

}



100% {

fill: blue;

transform:scaleY(1);

}

}

Download CSS3

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

JavaScript

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

Summary

One letter squashes then stretches, with a bounce, back to full size.

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