CSSのtranslate、scale、rotateはtransformなしで使える

transformなしでCSSアニメーション
translateXプロパティなどは存在しない
skewプロパティも存在しない
Safariの使用可能バージョンに注意

transformなしでCSSアニメーション

CSSでtranslate、scale、rotateを使用する際はtransformプロパティを使用してtransform: translate(x, y); のように書かれることが多いです。

/* <div class="box"></div> */
.box {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: move 2s infinite alternate;
}

@keyframes move {
  to {
    transform: translate(100px, 50px);
  }
}

しかし、現在のブラウザはtranslate、scale、rotateに関してはプロパティとして単独で使用できるので、translate: x y; のように短く書くことが可能です。

/* <div class="box-new"></div> */
.box-new {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: move-new 2s infinite alternate;
}

@keyframes move-new {
  to {
    translate: 100px 50px;
  }
}

scaleとrotateは以下の通り。

/* <div class="box-scale"></div> */
.box-scale {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: box-scale 2s infinite alternate;
}

@keyframes box-scale {
  to {
    scale: 2;
  }
}

/* <div class="box-rotate"></div> */
.box-rotate {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: box-rotate 2s infinite;
}

@keyframes box-rotate {
  to {
    rotate: 1turn;
  }
}

rotateプロパティは「rotate: x 1turn;」や「rotate: y 1turn;」のように書くとx軸やy軸で回転させることができます。

/* <div class="box-rotate-xy"></div> */
.box-rotate-xy {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: box-rotate-xy 2s infinite;
}

@keyframes box-rotate-xy {
  50% {
    rotate: x 1turn;
  }
  51% {
    rotate: y 1turn;
  }
}

translateXプロパティなどは存在しない

transformだとtranslateX()があったのでtranslateXもありそうですが、translateXプロパティなどは存在しないので注意が必要です。

scaleYやrotateZなどX, Y, Zがうしろに付くプロパティは1つもありません。

/* プロパティが存在しないので動作しない */
.box-x {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: move-x 2s infinite alternate;
}

@keyframes move-x {
  to {
    translateX: 100px;
  }
}

skewプロパティも存在しない

要素を2次元平面上でゆがめて変換できるskewプロパティも存在しません。

translate、scale、rotateプロパティがあるのでskewもありそうですが、ないです。

/* プロパティが存在しないので動作しない */
.box-skew {
  width: 50px;
  height: 50px;
  background: #C00;
  animation: box-skew 2s infinite alternate;
}

@keyframes box-skew {
  to {
    skew: 45deg;
  }
}