Animated Heartbeat using @keyframes Editable CSS Example
Before i start i would like to introduce you to my dear friend Codepen
CSS3 @keyframes Rule
Definition and Usage
With the @keyframes rule, you can create animations.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
The @keyframes rule is supported in Internet Explorer 10, Firefox, and Opera.
Safari and Chrome support an alternative, the @-webkit-keyframes rule.
Note: The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Now lets get started with this simple but cool CSS animation
Animated Heartbeat using @keyframes – Editable CSS Example
Feel free to play with it and learn on Codepen.