CSS Squish animation effect

CSS Squish animation

Squish a HTML element using the transform#scale CSS property. Alternatively you can easily adapt this to get the stretch animation effect.

<style> .squish { /* Uncomment as needed. */ /* width: 100px; */ /* height: 100px; */ /* background-color: deeppink; */ animation-name: squish; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes squish { 0% { transform: scale(1, 1); } 25% { transform: scale(0.02, 1); } 50% { transform: scale(1,1); } 75% { transform: scale(1,0.2) } 100% { transform: scale(1,1); } } </style>
    Hints:
  • If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
  • Remove the HTML style tag as needed.
  • Change values in the code such as animation-duration as needed.
Animation effects source code licenced under MIT Licence