CSSアニメーションの動きを操る！一時停止のための基本コード解説

2024年10月11日

Webページに動きを加えるCSSアニメーション。魅力的なデザイン要素として活用されていますが、実際のプロジェクトでは「アニメーションを一時停止する」「動きを細かく制御する」ことが求められる場面もあります。

本記事では、CSSでアニメーションを一時停止するための基本コードから、実践的なテクニックまでを解説します。プロジェクトに即役立つスキルを身につけ、アニメーションの自由度を高めましょう。

一時停止でアニメーションの質を向上させる理由

CSSアニメーションは、Webページに動きを加えることでユーザーの興味を引き、視覚的な魅力を高める手段として有効です。しかし、アニメーションが常に動き続けると、意図しない状況でユーザーの集中力を削いだり、視覚的な負担を増やす可能性があります。

特に、ユーザーがページ内の他のコンテンツに集中したいときにアニメーションが動き続けていると、かえって不快感を与えてしまうこともあるため、「一時停止」機能が効果的です。

アニメーションの一時停止は、動作を制御するための便利な方法です。ユーザーがマウスをホバーした時や特定の操作をした場合にアニメーションが一時停止することで、意図したときにのみ動作を続けるようにすることが可能です。

CSSでアニメーションを一時停止する方法

ホバーで動かす

CSSアニメーションを一時停止するための基本的なコードは、animation-play-state プロパティを使って実現します。このプロパティは、アニメーションの動作状態を指定し、running や paused の2つの値で制御が可能です。デフォルトでは running に設定されており、これによりアニメーションが再生されますが、paused に変更することでアニメーションが一時停止し、ユーザーが意図したタイミングで動きを止めることができます。

たとえば、次のような基本コードでアニメーションを一時停止できます：

ホバーすると動き出します。

See the Pen 一時停止１ by kosuke (@kenkenpyo) on CodePen.

このコードでは、.element クラスが適用された要素が move アニメーションで横移動する動きを設定していますが、animation-play-state: paused; によって動作を停止した状態に保っています。

CSSの animation-play-state プロパティを理解し活用することにより、アニメーションの動きを簡単に一時停止・再開でき、Webサイト全体のデザインに合った流れるようなアニメーションを作成することができます。

ホバーで一時停止

CSSアニメーションにおいて、@keyframes と transition を組み合わせてアニメーションの動きをより柔軟に制御することが可能です。@keyframes はアニメーションの動作パターンを定義し、transition は変化のタイミングや速度をコントロールするために使われます。特に一時停止機能の実装には、これらを上手く活用することで、ユーザーが意図したタイミングでスムーズに動きを制御することができます。

まず、@keyframes は特定のアニメーションの一連の動きを指定し、どの時点でどのように動かすかを決めます。たとえば、次のようなコードを使うと、要素が左から右に移動する動きを定義できます：

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

この@keyframesで定義した動きを基に、transitionプロパティを使って、hover時やクリック時に一時停止や再開ができるようになります。例えば、アニメーションが一時停止する前後の滑らかさを保つために、transitionで変化の時間を設定しておくと、動きの急停止を防ぎ、より自然な動作に仕上がります。

以下のコードでは、hoverでアニメーションが一時停止するように設定されています：

See the Pen 一時停止２ by kosuke (@kenkenpyo) on CodePen.

このコードにより、hoverで animation-play-state が paused になり、アニメーションが一時停止します。transition プロパティによって滑らかな停止が実現され、ユーザーが意図したタイミングでアニメーションを制御できます。

こうした @keyframes と transition の組み合わせにより、CSSアニメーションの動きの自由度が大幅に増し、ユーザー体験の向上や自由度の高いデザインに対応することが可能です。

クリックで一時停止

CSSアニメーションをクリックで一時停止させる方法は、ユーザーが任意のタイミングで動きを止められるため、特定の操作性を持たせたい場合に非常に有用です。JavaScriptなしで実装するためには、checkboxやinput要素とCSSの :checked擬似クラスを利用します。クリック操作でアニメーションの一時停止と再開を簡単に実現できます。

以下に、クリックでアニメーションを一時停止させるための基本的なコードを示します：

↓クリックすると停止します。

See the Pen 一時停止３ by kosuke (@kenkenpyo) on CodePen.

このコードでは、input[type=”checkbox”]を非表示にし、label内にアニメーション要素を配置することで、クリック時にチェック状態が変化するたびに animation-play-state を paused と running に切り替えることが可能です。.element クラスに適用されたアニメーションが、チェック状態に応じて一時停止または再開されるため、ユーザーがクリックで簡単にアニメーションを操作できます。

この手法を使うことで、クリックをトリガーとしたアニメーション制御をJavaScriptなしで実現でき、ページ全体のパフォーマンスを保ちながら自由度の高い動作を実装できます。

まとめ

CSSアニメーションの一時停止機能は、アニメーションの動きを柔軟にコントロールするために不可欠な要素です。animation-play-state プロパティを用いた基本的な一時停止の実装や、keyframes と transition を使った滑らかな制御方法、そしてクリック操作による停止の工夫など、さまざまな技術を組み合わせることで、ユーザー体験を向上させるアニメーションが可能になります。

これらの手法を活用することで、CSSアニメーションがページデザインの一部としてスムーズに動作し、ユーザーにとって操作がしやすくなります。CSSアニメーションをより深く理解して効率的に活用し、ユーザーの期待に応えられるスキルを身につけましょう。