HTML CSS

BOUNCE EFFECT WITH PURE CSS

(a quick guide)

@keyframes spring {   0% { transform: scale(1) translateY(0); }   10% { transform: scale(1.2, 0.6); }   30% { transform: scale(0.8, 1.1)              translateY(-10px); }   50% { transform: scale(1) translateY(0); }    100% { transform: translateY(0); }  }

CSS BOUNCE EFFECT

01

.spring {   animation: spring 2s;   animation-timing-function: ease;   animation-iteration-count: infinite;  }

APPLY TO HTML ELEMENTS

02

JUST ADD THE CSS CLASS <input type="button" value="BUTTON!" class="spring"/> <img src="IMAGE.JPG" class="spring"/> <div class="spring">FOO!</div>

STOPPING ANIMATION

03

.spring:hover { animation: none; }