właściwość transform rotate w animacji

pytanie zadane 18 września 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)

Witam, ostatnio zacząłem bawić się właściwością transform: rotateY tak, aby obrazek który kończył swoja animację obrócił się o 180 stopni. Wszystko szło dobrze, jednak nie rozumiem dlaczego w przypadku "keyframes turn", animacja obraca się znacznie szybciej niż wskazuje na to wartość procentowa(100%) oraz dlaczego przy użyciu alternate wraca znowu do pierwotnej wartości rotateY(0). Wiem, że problem można rozwiązać przez wydłużenie czasu animacji do 8 sekund i zastosowaniu obrotu przy 50%, ale nie rozumiem dlaczego mój sposób nie działa? Poniżej link:

https://jsfiddle.net/ayfz176c/

1 odpowiedź

odpowiedź 19 września 2022 przez VBService Ekspert (253,280 p.)
wybrane 20 września 2022 przez jasper93

Najlepsza

Przy Twoim zapisie animacja przechodzi w punkt kulminacyjny w momencie osiągnięcia przez oryginalny rozmiar obrazka (właściwie to tagu section, który "przybiera" rozmiar obrazka - background-image: url(...) ) środka dostępnego ekranu dla strony (vw - viewport width), rozpoczynając obrót (efekt animacji css dla rotateY) obrazka od lewej krawędzi tego obrazka.

<!-- https://openclipart.org/detail/239883/walking-man-sprite-sheet -->
<!-- 2048w 314h -->
<!-- 256px 1 kad -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Walk</title>

    <style>
      .vertical-axis {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
        width: 0;
        height: 50vh;
        border: 2px dashed red;
        z-index: 9999;
      }
      img {
        display: block;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translatex(-50%);
      }
      section {
        position: absolute;
        left: 0;
        top: 5%;
        width: 256px;
        height: 314px;
        border: 5px solid red;
        background-image: url(https://www.codeandweb.com/static/8e79ffb1adb31f655c549115f5e77b47/cccdc/trimming.avif);
        animation: 
          walk 1s steps(8) infinite,
          move 4s alternate infinite linear,
          turn 4s infinite alternate;
      }

      @keyframes walk {
        100% {
          background-position: -2048px;
        }
      }
      @keyframes move {
        from {
          left: 0;
        }
        100% {
          left: calc(100% - 256px);
        }
      }
      @keyframes turn {
        0% {
          transform: rotateY(0);
        }
        100% {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="vertical-axis"></div>
    <img src="https://www.codeandweb.com/static/8e79ffb1adb31f655c549115f5e77b47/cccdc/trimming.avif">

    <section></section>

    <script>
      const s = document.querySelector('section');
      setInterval(() => {
        console.clear();
        console.log(window.getComputedStyle(s).getPropertyValue('transform'));
      }, 200);
    </script>
  </body>
</html>

animacja "postaci" (turn) w Mojej opinii, powinna się "odbyć" jak najbliżej "ściany" (krawędzi dostępnej strony dla animacji, w momencie zbliżania się)

spróbuj np. tak (bez użycia: alternate)

<!-- https://openclipart.org/detail/239883/walking-man-sprite-sheet -->
<!-- 2048w 314h -->
<!-- 256px 1 kad -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Walk</title>

    <style>
      .vertical-axis {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
        width: 0;
        height: 50vh;
        border: 2px dashed red;
        z-index: 9999;
      }
      img {
        display: block;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translatex(-50%);
      }
      section {
        position: absolute;
        left: 0;
        top: 5%;
        width: 256px;
        height: 314px;
        background-image: url(https://www.codeandweb.com/static/8e79ffb1adb31f655c549115f5e77b47/cccdc/trimming.avif);
        animation:
          walk 1s steps(8) infinite,
          /*move 4s alternate infinite linear,*/
          move_and_turn 8s infinite;
      }

      @keyframes walk {
        100% {
          background-position: -2048px;
        }
      }

      /*
      @keyframes move {
        from {
          left: 0;
        }
      100% {
          left: calc(100% - 256px);
        }
      }
      */

      @keyframes move_and_turn {
        0% {
          left: 0;         
        }
        40% {
          transform: rotateY(0);
        }
        50% {
          left: calc(100% - 256px);
          transform: rotateY(180deg);
        }
        90% {
          transform: rotateY(180deg);
        }
        100% {
          left: 0;          
        }
      }
    </style>
  </head>
  <body>
    <div class="vertical-axis"></div>
    <img src="https://www.codeandweb.com/static/8e79ffb1adb31f655c549115f5e77b47/cccdc/trimming.avif">

    <section></section>
  </body>
</html>

P.S. Spróbuj też z: ease-in-out