Live
x
<html> <head> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; } .wrapper { margin-top: 20px; } p { margin: 0; font-size: 34px; line-height: 80px; } .shape { margin: 10px; text-align: center; display: block; border: 2px solid black; border-radius: 20px; background: aliceblue; width: 80px; height: 80px; cursor: pointer; } .shape:hover { width: 600px; } .anim-1 { transition: 1s ease-in; } .anim-2 { transition: 1s ease-out; } .anim-3 { transition: 1s steps(4); } .anim-3 { transition: 1s steps(4); } .anim-4 { transition: 1s cubic-bezier(0.12, 1.56, 0.55, -0.68); } </style> </head> <body> <div class="wrapper"> <h2>Najedź myszką na przyciski</h2> <!-- Poniższe przyciski posiadają animacje. --> <div class="shape anim-1"> <p>1</p> </div> <div class="shape anim-2"> <p>2</p> </div> <div class="shape anim-3"> <p>3</p> </div> <div class="shape anim-4"> <p>4</p> </div> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.