緊急で動画を回すときの CSS

CSS どうでもいい

入り用になったときのメモ。

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 255, 0, 1) 25%,
    rgba(0, 255, 0, 1) 75%,
    rgba(0, 0, 255, 1) 100%
  );
  background-clip: text;
  color: transparent;
  font-size: 80px;
  animation: 10s cubic-bezier(0, -1, 1, 0) infinite rotate-keyframes;
}

@keyframes rotate-keyframes {
  from {
    transform: rotate(-27.5deg);
  }
  25% {
    transform: rotate(1020deg);
  }
  75% {
    transform: rotate(-1020deg);
  }
  to {
    transform: rotate(27.5deg);
  }
}