Как сделать такую анимацию на css?

Question

[StepsOnes]

У меня получается шляпа какая-то)

.preload {
        width: 100%;
        height: 100vh;
        background-color: #2D2D2D;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
      }

      .preload-body {
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: 1s;

        animation: hide infinite 2s ease-in-out alternate-reverse;
      }

      .key-anim {
        transition: 2s;
        animation: spin infinite 1s ease-in-out alternate ;
      }

      .key-anim img {
        width: 90px;
        height: 90px;
      }

      @keyframes spin {
        0% {
          transform: rotate(10deg);
        }
        100% {
          transform: rotate(40deg);
        }
      }

      @keyframes hide {
        0% {
          height: 70px;
        }

        100% {
          height: 10px;
        }
      }

<div class="preload">
      <div class="preload-body">
        <div class="key-anim">
          <img src="logo.svg" alt="">
        </div>
      </div>
    </div>

Comments

[StepsOnes]

можно пример без ключика, что бы я понимал как это реализовать у себя в проекте

[imko]

transform:rotate + clip-path