CodePen Embed - CSS Transform

Live
​x
 
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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: 0 20px;
        text-align: center;
        display: inline-block;
        border: 2px solid black;
        border-radius: 50%;
        background: aliceblue;
        width: 80px;
        height: 80px;
        cursor: pointer;
      }
​
      /* Właściwości, które zmienią swoje wartości w wyniku akcji :hover.
      Dodanie nowych właściwości jest tym samym co zmiana. */
      .shape:hover {
        background: aquamarine;
        /* Element jednocześnie powiększy się i zrobi jeden pełny obrót.
        Obrót bez animacji nie będzie widoczny, ponieważ wykona się błyskawicznie.*/
        transform: scale(1.5) rotate(360deg);
        color: goldenrod;
      }
​
      /* Najprostsze użycie "transition" - zmiana każdej z wartości potrwa 1 sekundę
      i wszystkie zmiany wykonają się w tym samym czasie. */
      .anim-1 {
        transition: 1s;
      }
​
      /* W poniższym przypadku zmieniliśmy czasy dla właściwości "transform" - teraz zmiany
      w transform (tutaj: obrót o 360 stopni) będą trwały pół sekundy i zaczną się 
      z jednosekundowym opóźnieniem. Wszystkie pozostałe właściwości będą zmieniały się
      przez jedną sekundę bez opóźnień. */
      .anim-2 {
        transition: 1s, transform 0.5s 1s;
      }
​
      /* Korzystając z opóźnień możemy "kolejkować" nasze animacje. W poniższym przykładzie
      pierwsza wykona się zmiana dla "background", gdyż nie ma żadnych opóźnień,
      następnie "transform", ponieważ opóźnienie wynosi 1s a jako ostatni
      zmieni się "color" - 2s po akcji :hover */
      .anim-3 {
        transition: background 1s, transform 0.5s 1s, color 0.5s 2s;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h2>Najedź myszką na przyciski</h2>
      <!-- Brak animacji, akcje :hover wykonają się błyskawicznie. -->
      <div class="shape">
        <p>0</p>
      </div>
      <!-- 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>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.