Documentation CSS

この記事で学べること

  • animation-timelineプロパティの概念と目的
  • スクロール駆動アニメーションの実装方法
  • カスタムタイムラインの設定方法
  • JavaScriptとの連携による高度な制御
  • ブラウザ対応状況と注意点

概要

CSSのanimation-timelineプロパティは、アニメーションの実行タイミングを制御するために使用されるプロパティです。このプロパティを使うと、アニメーションを特定のタイムラインに同期させたり、複数のアニメーションを連携させて実行することが可能になります。animation-timelineは、ウェブデザインやインタラクティブなコンテンツでタイミングを精密に制御したい場合に非常に有用です。

animation-timelineの基本的な使い方

animation-timelineプロパティを使用することで、アニメーションが特定のタイムラインに従って実行されます。通常、アニメーションは即座に開始しますが、このプロパティを設定することで、異なるタイミングやトリガーに従ってアニメーションを開始させることができます。

.element {
    animation: fade-in 2s forwards;
    animation-timeline: scroll-timeline; /* カスタムタイムラインにアニメーションを同期 */
}

この例では、.elementのアニメーションがscroll-timelineというカスタムタイムラインに従って実行されます。

animation-timelineの値

animation-timelineには以下の値があります。これらの値がアニメーションの実行タイミングにどのように影響するかを説明します。

none

デフォルトの設定で、アニメーションはすぐに実行されます。animation-timelineが設定されていない場合と同じです。

.element {
    animation: slide-in 3s infinite;
    animation-timeline: none;
}

タイムライン名

カスタムタイムラインの名前を指定します。この名前に基づき、アニメーションがそのタイムラインに従って実行されます。タイムラインはJavaScriptやCSSで定義できます。

.element {
    animation: move 5s infinite;
    animation-timeline: custom-timeline;
}

使用例

スクロールタイムラインを使ったアニメーション制御

以下の例では、scroll-timelineを使ってスクロールに連動したアニメーションを実現しています。ユーザーがスクロールするたびに、要素のアニメーションが進行します。

<div class="scroll-animation"></div>
<style>
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.scroll-animation {
    width: 100px;
    height: 100px;
    background-color: coral;
    animation: fade-in 2s forwards;
    animation-timeline: scroll-timeline;
    /* scroll-timelineの定義はJavaScriptなどで行う必要があります */
}
</style>

この例では、スクロール動作に応じてアニメーションが再生されます。タイムラインの設定により、ユーザーインタラクションとアニメーションをシームレスに同期できます。

JavaScriptでのカスタムタイムラインの設定

以下の例では、animation-timelineを使ってJavaScriptでカスタムタイムラインを作成し、それをCSSアニメーションにリンクさせています。

<div class="animated-box"></div>
<style>
@keyframes move-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}
.animated-box {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    animation: move-right 3s forwards;
    animation-timeline: custom-timeline;
}
</style>
<script>
document.timeline = new ScrollTimeline({
  source: document.scrollingElement,
  orientation: 'block',
  scrollOffsets: [`CSS`.percent(0), `CSS`.percent(100)],
});
</script>

この例では、ScrollTimelineを使用してスクロールに基づくタイムラインを定義し、それをアニメーションにリンクしています。

注意点

  • animation-timelineは、タイムラインの設定や制御に依存するため、他のCSSプロパティやJavaScriptとの連携が不可欠です。タイムラインの設定を理解し、適切に同期する必要があります。
  • 現在animation-timelineは一部のブラウザでのみサポートされています。使用する際はブラウザの互換性を確認し、必要に応じてフォールバック処理を実装しましょう。
  • タイムラインの制御が複雑になると、アニメーションのデバッグも困難になる可能性があります。設計時にはシンプルな構造を心がけ、適切にタイムラインを管理することが重要です。

まとめ

animation-timelineプロパティは、CSSアニメーションの実行タイミングを高度にカスタマイズするための強力なツールです。これを活用することで、ユーザーのインタラクションや特定のイベントに同期したアニメーションを作成でき、より魅力的でインタラクティブなウェブデザインが実現します。タイムラインの設定や制御を理解し、効果的にアニメーションを活用しましょう。

ポイントの振り返り

値動作使用例
noneデフォルト、即時実行通常のアニメーション
scroll()スクロール位置に連動パララックス効果
view()要素の可視性に連動スクロールで要素が現れる効果
カスタム名独自タイムラインに連動複雑なインタラクション

参考文献

円