はじめに
tailwind cssでアニメーションを学び始める際、拡大・移動などごくごくシンプルなアニメーションの実装例がなかったので、記事にまとめてみました。
この記事では、以下の実装を紹介しています。
拡大
繰り返さない
実行時間を変える
左右に移動
もっと小刻みに移動
回転
色を変える
組み合わせる
実行環境
next.js: version 11.0
react: version 17.0
tailwindcss: version 2.2
サンプルソース
GitHub
アニメーションの実装例
拡大
scaleを使うと要素が拡大します。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
scale: 'scale 3s ease-in-out infinite',
},
keyframes: {
scale: {
'0%': { transform: 'scale(1.0)' },
'100%': { transform: 'scale(3.0)' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-scale"></div>
</div>
</div>
)
}
繰り返さない
infiniteを指定すると無限に繰り返します。
もし1度だけ実行する場合は、infiniteの指定を削除します。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
scale: 'scale 3s ease-in-out',
},
keyframes: {
scale: {
'0%': { transform: 'scale(1.0)' },
'100%': { transform: 'scale(3.0)' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-scale"></div>
</div>
</div>
)
}
実行時間を変える
時間は、秒単位で指定します。
もしアニメの時間を3秒から10秒にする場合は、animationの指定を3s → 10sに変更します。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
scale: 'scale 10s ease-in-out',
},
keyframes: {
scale: {
'0%': { transform: 'scale(1.0)' },
'100%': { transform: 'scale(3.0)' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-scale"></div>
</div>
</div>
)
}
左右に移動
translateX()を使うと左右に移動します。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
move: 'move 3s ease-in-out infinite',
},
keyframes: {
move: {
'0%': { transform: 'translateX(0px)' },
'20%': { transform: 'translateX(50px)' },
'40%': { transform: 'translateX(-50px)' },
'60%': { transform: 'translateX(50px)' },
'80%': { transform: 'translateX(-50px)' },
'100%': { transform: 'translateX(0px)' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-move"></div>
</div>
</div>
)
}
もし縦に移動する場合は、translateX（）を指定します。
もっと小刻みに左右に移動
キーフレームを増やすほど動きが小刻みになります。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
move: 'move 3s ease-in-out infinite',
},
keyframes: {
move: {
'0%': { transform: 'translateX(0px)' },
'10%': { transform: 'translateX(50px)' },
'20%': { transform: 'translateX(-50px)' },
'30%': { transform: 'translateX(50px)' },
'40%': { transform: 'translateX(-50px)' },
'50%': { transform: 'translateX(50px)' },
'60%': { transform: 'translateX(-50px)' },
'70%': { transform: 'translateX(50px)' },
'80%': { transform: 'translateX(-50px)' },
'90%': { transform: 'translateX(50px)' },
'100%': { transform: 'translateX(0px)' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-move"></div>
</div>
</div>
)
}
回転
回転させるときは、rotateを使います。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
rotate: 'rotate 3s ease-in-out infinite',
},
keyframes: {
rotate: {
'0%': { transform: 'rotate(0deg)' },
'25%': { transform: 'rotate(120deg)' },
'50%': { transform: 'rotate(0deg)' },
'75%': { transform: 'rotate(-120deg)' },
'100%': { transform: 'rotate(0deg)' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-rotate"></div>
</div>
</div>
)
}
色を変える
色は、backgroundで指定します。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
color: 'color 3s ease-in-out infinite',
},
keyframes: {
color: {
'0%': { background: 'white' },
'100%': { background: 'black' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-color"></div>
</div>
</div>
)
}
組み合わせる
例ではスケールと色を組み合わせています。
複数の要素を組み合わせる場合は、keyframeにカンマで区切って登録します。
tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
combo: 'color 3s ease-in-out infinite',
},
keyframes: {
combo: {
'0%': { transform: 'scale(1.0)', background: 'white' },
'100%': { transform: 'scale(3.0)', background: 'black' },
},
}
}
}
}
index.js
export default function Home() {
return (
<div>
<div className="flex items-center justify-center w-full min-h-screen bg-gray-200">
<div className="w-20 h-20 bg-red-500 animate-combo"></div>
</div>
</div>
)
}
参考
アニメーション Tailwind CSS
↧