画面外から横にスライドして画面内に入ってバウンドするヤツ

2020年11月21日CSS

はじめに

前回の改良版です。ちょっと行きすぎちゃって戻ってくるやつをcssの"@keyframes"と"animation"でやってみたいと思います。

できた

See the Pen
VwjJZOL by AtsushiNakata (@nakata999)
on CodePen.

解説

@keyframes slideIn {
  60% {
    transform: translateX(-120%);
  }
  75% {
    transform: translateX(-100%);
  }
  90% {
    transform: translateX(-102%);
  }
  100% {
    transform: translateX(-100%);
  }
}

“keyframes"の数値(%)の無限の組み合わせの中から見つけ出した最適解がコレ↑。はいコレ絶対。

.show {
  animation-name: slideIn;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

“animation-duration: 1.1s"の"コンマ1″の部分に「こだわり」と「常に最高を追い求める探求心」を見せつけてやりたい。

あとがき

そんなワケで初めて"@keyframes"使ってみましたがおもしろいですね。ただ、こだわりすぎるとキリがない。そんな危険もはらんだ、とても魅力的なものだと思いました。

おしゃれ度

★★☆☆☆