CSSスタジオ

CSSアニメーションビルダー

タイムラインエディターでキーフレームアニメーションを作成

設定

s
s

タイムライン

0%25%50%75%100%
キーフレーム位置 0%
キーフレーム位置 100%

プリセット

プレビュー

現在の設定でプレビュー

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg) translateX(0px) translateY(0px);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite both;
}