Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .spring-container { display: flex; justify-content: center; align-items: center; padding: 40px; background-color: #f8f9fa; border: 1px solid #dee2e6; } .spring-box { width: 100px; height: 100px; background-color: #6f42c1; color: white; display: flex; justify-content: center; align-items: center; font-family: sans-serif; font-weight: bold; border-radius: 12px; cursor: pointer; /* A custom elastic/spring curve generated for the linear() function. It overshoots 1 (going up to 1.15), comes back down, and settles. */ transition: transform 0.8s linear( 0, 0.06, 0.25 18%, 0.62 34%, 1 47%, 1.15 56%, 1.17 60%, 1.13 65%, 1 74%, 0.94 81%, 0.95 85%, 1 94%, 1 ); } .spring-box:hover { transform: scale(1.5) rotate(15deg); } </style> <div class="spring-container"> <div class="spring-box">Hover Me</div> </div>