× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Make Button Bounce with CSS3

web-tiki
Mar 16, 2015
<p>You can use a keyframe animation to animate the scale ratio of your button and make it bounce:</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.order { position: absolute; top: 50px; left: 50px; width: 75px; line-height: 75px; text-align:center; opacity: 1; background: green; color:#fff; border-radius:50%; -webkit-animation: bounce .3s infinite alternate; -o-animation: bounce .3s infinite alternate; -moz-animation: bounce .3s infinite alternate; animation: bounce .3s infinite alternate; } @-webkit-keyframes bounce { to { transform: scale(1.2); } } @-o-keyframes bounce { to { transform: scale(1.2); } } @-moz-keyframes bounce { to { transform: scale(1.2); } } @keyframes bounce { to { transform: scale(1.2); } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="order"&gt;Order&lt;/div&gt;</code></pre> </div> </div> <p></p> <h2>Iteration count:</h2> <p>If you want to stop the animation after a number of "bounces" like in the link you posted, you can use <code>animation-iteration-count</code> (remember to use an even number of iterations otherwise the animation will snap at the end) :</p> <p></p><div class="snippet"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.order { position: absolute; top: 50px; left: 50px; width: 75px; line-height: 75px; text-align:center; opacity: 1; background: green; color:#fff; border-radius:50%; -webkit-animation: bounce .3s infinite alternate; -o-animation: bounce .3s infinite alternate; -moz-animation: bounce .3s infinite alternate; animation: bounce .3s infinite alternate; -webkit-animation-iteration-count: 8; -o-animation-iteration-count: 8; -moz-animation-iteration-count: 8; animation-iteration-count: 8; } @-webkit-keyframes bounce { to { transform: scale(1.2); } } @-o-keyframes bounce { to { transform: scale(1.2); } } @-moz-keyframes bounce { to { transform: scale(1.2); } } @keyframes bounce { to { transform: scale(1.2); } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="order"&gt;Order&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29005916/Make%20Button%20Bounce%20with%20CSS3/29006068">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus