Example 1: The below example shows an outward pulse block that stretches itself and shrinks back when it reaches its highest size, starts with a circle, and ends with a square shape with different colors coming out each time when it changes its shape.
Example 2: The below examples show an inward or reverse pulse generating animation effect on a circle that gives inward circular pulse after the completion of the effect. It expands back to its original state and the effect continues to happen.
- Materialize CSS - Pulse and Shadow
- CSS | animation-delay Property
- CSS | animation-name Property
- CSS | animation-direction Property
- CSS | animation-play-state Property
- Cartoon animation loader using CSS
- CSS | animation-fill-mode Property
- CSS | animation-iteration-count Property
- CSS | animation-timing-function Property
- CSS | animation-duration Property
- CSS | Animation to Change the Hover State of a Button/Image
- How to make smooth bounce animation using CSS ?
- Loading Text Animation Effect using CSS
- How to create X and Y axis flip animation using HTML and CSS ?
- How to Create Border Animation using CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- Rubber Band Text animation using HTML and CSS
- CSS | Tooltip Fade In Animation
- CSS Animation and @Keyframes Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.