Webサイトに個性を与え、より快適なユーザエクスペリエンスを達成するためのツールとして、CSSのアニメーションは強力な手段となります。 CSSは、より多くのブラウザに対応しているため使い易いのがメリットです。 本記事では、作成にあたってのコツをまとめてみたので、ぜひ参考にしてください。 1.キーフレーム キーフレームを使うと、オブジェクトがどの段階でどう動くのかをコントロールすることができます。 この場合、 アニメーションの名称:pulse 三つの段階の構成:0% (開始時), 50% (x 秒後), 100% (終了時) CSS値: scale3d (x, y, z) となります。 このようにアニメーションが定義されれば、アニメーションの長さ・開始のタイミング・繰り返し・向きをコントロールできます。 例えば…… この例では、ボタンをアニメーション化し、持続時間を一秒として、先に作成してい
![【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法!](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b991629d863efeaedcc21249a4ec10e87c9fe92/height=288;version=1;width=512/https%3A%2F%2Fwww.seleqt.net%2Fwp-content%2Fuploads%2F2017%2F03%2F1-dELVNUPKtcFzEd5CMZnKLA-1.gif)