アニメーション

ページ内で使用する滑らかなアニメーションのコレクション。

使い方

.uk-animation-* クラスのいずれかを任意の要素に追加します。アニメーションはクラスが追加されたときに表示されるため、通常はページロード時にすぐに表示されます。要素がビューポートに入ったときなど、別の時点でアニメーションを表示するには、JavaScriptを使用してクラスを追加します。たとえば、スクロールスパイコンポーネントなどを使用します。これは、アニメーションを利用するUIkitの多くのコンポーネントで発生するものです。すべてのアニメーション自体はCSSで実装されているため、再生にJavaScriptは必要ありません。

クラス	説明
`.uk-animation-fade`	要素がフェードインします。
`.uk-animation-scale-up` `.uk-animation-scale-down`	要素がフェードインし、拡大または縮小します。
`.uk-animation-slide-top` `.uk-animation-slide-bottom` `.uk-animation-slide-left` `.uk-animation-slide-right`	要素が上、下、左、または右から、自身の高さまたは幅でフェードインし、スライドインします。
`.uk-animation-slide-top-small` `.uk-animation-slide-bottom-small` `.uk-animation-slide-left-small` `.uk-animation-slide-right-small`	要素が上、下、左、または右から、固定ピクセル値で指定されたより小さな距離でフェードインし、スライドインします。
`.uk-animation-slide-top-medium` `.uk-animation-slide-bottom-medium` `.uk-animation-slide-left-medium` `.uk-animation-slide-right-medium`	要素が上、下、左、または右から、固定ピクセル値で指定された中程度の距離でフェードインし、スライドインします。
`.uk-animation-kenburns`	要素がフェードインせずに非常にゆっくりと拡大します。
`.uk-animation-shake`	要素が揺れます。
`.uk-animation-stroke`	SVG要素のストロークが描画されます。

ホバーまたはフォーカス時にアニメーションを切り替えるには、親要素に.uk-animation-toggleクラスを追加します。また、キーボードナビゲーションおよびタッチデバイスでアニメーションにフォーカス可能にするために、tabindex="0"を追加します。

<div class="uk-animation-toggle" tabindex="0">
    <div class="uk-animation-fade"></div>
</div>

フェード

拡大

縮小

シェイク

左

上

下

右

左（小）

上（小）

下（小）

右（小）

左（中）

上（中）

下（中）

右（中）

<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
            <p class="uk-text-center">Fade</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Scale Up</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
            <p class="uk-text-center">Scale Down</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
            <p class="uk-text-center">Shake</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
            <p class="uk-text-center">Left</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
            <p class="uk-text-center">Top</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
            <p class="uk-text-center">Bottom</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
            <p class="uk-text-center">Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
            <p class="uk-text-center">Left Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
            <p class="uk-text-center">Top Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
            <p class="uk-text-center">Bottom Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
            <p class="uk-text-center">Right Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
            <p class="uk-text-center">Left Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
            <p class="uk-text-center">Top Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
            <p class="uk-text-center">Bottom Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
            <p class="uk-text-center">Right Medium</p>
        </div>
    </div>
</div>

反転モディファイア

デフォルトでは、すべてのアニメーションは入ってくるものです。アニメーションを反転するには、.uk-animation-reverseクラスを追加します。

<div class="uk-animation-fade uk-animation-reverse"></div>

フェード

拡大

縮小

シェイク

左

上

下

右

左（小）

上（小）

下（小）

右（小）

左（中）

上（中）

下（中）

右（中）

<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
            <p class="uk-text-center">Fade</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
            <p class="uk-text-center">Scale Up</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
            <p class="uk-text-center">Scale Down</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
            <p class="uk-text-center">Shake</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
            <p class="uk-text-center">Left</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
            <p class="uk-text-center">Top</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
            <p class="uk-text-center">Bottom</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
            <p class="uk-text-center">Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
            <p class="uk-text-center">Left Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
            <p class="uk-text-center">Top Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
            <p class="uk-text-center">Bottom Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
            <p class="uk-text-center">Right Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
            <p class="uk-text-center">Left Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
            <p class="uk-text-center">Top Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
            <p class="uk-text-center">Bottom Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
            <p class="uk-text-center">Right Medium</p>
        </div>
    </div>
</div>

高速モディファイア

アニメーションをより速い速度で再生するには、要素に.uk-animation-fastクラスを追加します。

<div class="uk-animation-fade uk-animation-fast"></div>

フェード

<div class="uk-width-1-3@s">
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-fast uk-animation-fade">
            <p class="uk-text-center">Fade</p>
        </div>
    </div>
</div>

原点モディファイア

デフォルトでは、スケーリングアニメーションは中央から開始されます。この動作を変更するには、ユーティリティコンポーネントから.uk-transform-origin-*クラスのいずれかを追加します。

<div class="uk-animation-scale-up uk-transform-origin-bottom-right"></div>

右下

中央上

中央下

<div class="uk-child-width-1-3@s" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-bottom-right">
            <p class="uk-text-center">Bottom Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-top-center">
            <p class="uk-text-center">Top Center</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-bottom-center">
            <p class="uk-text-center">Bottom Center</p>
        </div>
    </div>
</div>

ケンバーンズ

シンプルなケンバーンズ効果を追加するには、任意の画像に.uk-animation-kenburnsクラスを追加します。また、.uk-animation-reverseまたはユーティリティコンポーネントの.uk-transform-origin-*クラスのいずれかを適用して、効果を変更することもできます。

<img class="uk-animation-kenburns" src="" width="" height="" alt="">

デフォルトでは、アニメーションはページロード時に開始されます。この例では、画像がビューに入る際に効果を切り替えるために、スクロールスパイコンポーネントを使用しました。

<div class="uk-child-width-1-2@s uk-grid-small" uk-grid>
    <div>
        <div class="uk-overflow-hidden">
            <img src="images/dark.jpg" width="1800" height="1200" alt="Example image" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
    <div>
        <div class="uk-overflow-hidden">
            <img src="images/dark.jpg" width="1800" height="1200" alt="Example image" class="uk-animation-reverse uk-transform-origin-top-right" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
</div>

SVGストローク

アニメーションコンポーネントを使用して、SVGストロークをアニメーション化できます。効果は、目の前でSVGストロークが描画されているように見えます。SVG画像は、インラインSVGとしてマークアップに注入する必要があります。これは、手動で行うか、SVGコンポーネントを使用して行うことができます。

次の例は、インラインSVGを手動で追加する方法を示しています。ストロークの正確な長さを知る必要があるため、UIkitでは、カスタムプロパティ--uk-animation-strokeに長さを設定する必要があります。この例では、ストローク長は46です。

<svg class="uk-animation-stroke" style="--uk-animation-stroke: 46;" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill="none" stroke="#000" stroke-width="1" d=""/>
</svg>

より簡単な方法は、イメージ要素にuk-svg="stroke-animation: true"を追加して、SVGコンポーネントを使用することです。これにより、ストローク長が計算され、--uk-animation-strokeカスタムプロパティが自動的に追加されます。

<img src="" width="" height="" alt="" uk-svg="stroke-animation: true">

<div class="uk-child-width-1-2@m uk-text-center" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <img class="uk-animation-stroke" src="images/strokes.svg" width="400" height="400" alt="" uk-svg="stroke-animation: true">
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <img class="uk-animation-stroke uk-animation-reverse" src="images/strokes.svg" width="400" height="400" alt="" uk-svg="stroke-animation: true">
    </div>
</div>