CSSアニメーションは、シンプルで使いやすい標準のCSS3アニメーションAPI に基づいています。 JavaScriptを知らなくても、ほとんどすべてのネイティブビューをアニメーション化できます。 タッチやアクティブ化などの状態の変化が発生するたびに、要素の外観と動作を変更する可能性があります。 複数のフレームを使用して、アニメーションの方向を変更できます。 最後に、CSSアニメーションを使用すると、アニメーションコードをアプリケーションロジックから分離できます。
CSSアニメーションは、CSSアニメーションを説明するスタイルと、アニメーションのスタイルの開始状態と終了状態を示す一連のキーフレーム、および可能な中間ウェイポイントで構成されます。 アニメーション化可能なCSSプロパティを必要なだけ何度でも変更できます。
例1は、「example」アニメーションをボタン要素にバインドします。 アニメーションは4秒間続きます。ボタン要素の背景色を「赤」から「緑」に徐々に変更します。
例1：CSSを使用して簡単なアニメーションを作成する方法
@keyframes example {
from { background-color: red; }
to { background-color: green; }
}
.view {
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}アニメーションを機能させるには、アニメーションを要素にバインドする必要があります。
view1.className = "example";view1.className = "example";<Button id="myButton" text="{N}" class="example"/>CSSアニメーションは、コードベースのアニメーションで使用されるのと同じアニメーション可能なプロパティをサポートしています。
opacitybackground-color：backgroundColorに対応します。transform:translate：translateXおよびtranslateYプロパティに対応しています。transform:scale：scaleXおよびscaleYプロパティに対応します。transform:rotate：rotateプロパティに対応しています。CSSアニメーションは、animationプロパティとそのサブプロパティを使用して定義されます。 それらには、タイミング、持続時間、遅延、その他のアニメーションプロパティが含まれます。 実際のアニメーションの外観は、@keyframesルールで定義されます。
次のリストは、すべてのアニメーションプロパティを示しています。
animation-name：使用する@keyframesルールの名前を指定します。animation-delay：スタイルが適用されてからアニメーションが開始されるまでの時間を指定します。animation-duration：秒単位のアニメーションの長さを指定します。animation-iteration-count：アニメーションを再生する回数を指定します。デフォルトは 1 です。アニメーションを永久に繰り返すには、infiniteを使用します。animation-timing-function：加速曲線を定義することにより、アニメーションがキーフレームをどのように遷移するかを定義します。animation-fill-mode：アニメーションの実行後に適用される値を構成します。animation-direction：アニメーションがシーケンスを実行するたびに方向を変えるか、開始点にリセットして繰り返すかを構成します。animation：簡略プロパティにより、すべてのアニメーションプロパティを1行で設定できます。要素が遷移する複数のポイントを設定するには、例2に示す@keyframesルールを使用します。 これには、アニメーション名、アニメーションブレークポイント、およびアニメーション化するためのプロパティが含まれます。
例2：@keyframesルールの使用方法
@keyframes example {
from { background-color: red; }
to { background-color: green; }
}例2では、2つのキーフレームを持つアニメーションを定義しています。 「from」は0%（アニメーションの開始）を表し、「to」は100%（最終値）を表します。 パーセント表記を使用して、キーフレームをさらに追加できます。
例3は、アニメーションが25％完了、50％完了、100％完了したときに背景色を変更する方法を示しています。
例3：さまざまなアニメーション段階で背景色を変更する
@keyframes example {
0% { background-color: red; }
25% { background-color: yellow; }
50% { background-color: blue; }
100% { background-color: green; }
}例4に示すように、キーフレームに複数のプロパティを設定できます。
例4：異なるアニメーションステージで複数のプロパティを変更する
@keyframes example {
0% { background-color: red; transform: translate(0, 0); }
25% { background-color: yellow; transform: translate(200, 0); }
50% { background-color: blue; transform: translate(200, 200); }
75% { background-color: green; transform: translate(0, 200); }
100% { background-color: red; transform: translate(0, 0); }
}例5に示すように、キーフレームを組み合わせることができます。
例5：複数のキーフレームのプロパティを設定する
@keyframes example {
0%, 50% { background-color: red; transform: translate(0, 0); }
25%, 75% { background-color: yellow; transform: translate(200, 0); }
100% { background-color: red; transform: translate(0, 0); }
}animation-delayプロパティは、アニメーションの開始前に遅延時間（秒単位）を指定します。
例6：アニメーションが開始する前に遅延を設定する
.view {
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}animation-iteration-countのプロパティは、アニメーションを実行する回数を定義します。 例7のアニメーションは、停止する前に2回再生されます。
例7：animation-iteration-countプロパティの使用方法
.view {
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
}アニメーションを永久に再生する場合は、このプロパティをinfiniteに設定します。
animation-iteration-count: infinite;animation-timing-functionプロパティは、アニメーションの速度曲線を指定します。次の値のいずれかを指定できます。
ease：開始が遅いアニメーションを指定し、次に速く、次にゆっくり終了します（これがデフォルトです）。linear：開始から終了まで同じ速度のアニメーションを指定します。ease-in：開始が遅いアニメーションを指定します。ease-out：終了が遅いアニメーションを指定します。ease-in-out：開始が遅いアニメーションと終了が遅いアニメーションを指定します。spring：スプリングのアニメーションを指定します。cubic-bezier(n,n,n,n)：例8に示すように、3次ベジェ関数で独自の値を定義できます。例8：3次ベジェ関数を使用して速度曲線を指定する方法
.view {
animation-name: example;
animation-timing-function: cubic-bezier(0.1, 0.1, 1.0, 1.0);
}animation-fill-modeプロパティは、アニメーションが終了したときの要素のスタイルを決定します。 デフォルト値はnoneです。 この場合、アニメーション化された値はすべて、アニメーションが開始される前の状態にリセットされます。 アニメーション中に設定されたプロパティ値を保持するには、forwardsを選択する必要があります。
例9：animation-fill-modeプロパティの使用方法
.view {
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}例10に示すように、animation-directionプロパティを使用して、CSSアニメーションを逆方向に再生できます。
例10：アニメーションの方向を逆にする方法
.view {
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}animationプロパティでは、単一の行を持つすべての 7 つのアニメーションのプロパティを設定することができます：
例11：アニメーションの速記プロパティの使用方法
.view {
animation: example 4s ease-in-out 2s infinite reverse forwards;
}サポートされている構文は次のとおりです。
コンマを使用して、animationプロパティで2つのアニメーションを組み合わせることができます。
例12：アニメーションプロパティで複数のアニメーションを組み合わせる方法
.view {
animation: example 4s ease-in-out 2s infinite reverse, second-animation-example 5s ease-out;
}擬似セレクターは、要素の特別な状態を定義するために使用されます。たとえば、ユーザーがボタンに触れたとき。擬似セレクターを使用して、アニメーションをトリガーできます。
例13：要素の特別な状態でアニメーションをトリガーする方法
.button {
background-color: green;
}
.button:highlighted {
animation-name: highlight;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes highlight {
from { background-color: yellow; }
to { background-color: red; }
}例14：ビューの幅と高さをアニメーション化する方法
<GridLayout rows="* *" columns="*" class="home-panel">
<StackLayout row="0">
<Label text="{N}" class="big-label first-view" textWrap="true" />
</StackLayout>
<StackLayout row="1">
<Label text="{N}" class="big-label second-view" textWrap="true" />
</StackLayout>
</GridLayout>.first-view {
animation-name: example-width;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.second-view {
animation-name: example-height;
animation-duration: 5s;
animation-fill-mode: forwards;
}
@keyframes example-width {
from { width:140; }
to { width:200; }
}
@keyframes example-height {
from { height:140; }
to { height:200; }
}CSSアニメーションをトリガーする最も簡単な方法は、要素のclassNameプロパティを変更することです。
例15：CSSアニメーションをトリガーする方法
var view = page.getViewById("view");
view.className = "transparent";let view = page.getViewById<viewModule.View>("view");
view.className = "transparent";CSSで定義されているすべてのキーフレームには、getKeyframeAnimationWithNameメソッドを使用してコードでアクセスできます。 これにより、アニメーションプロパティをさらにカスタマイズできます。
例16：getKeyframeAnimationWithNameメソッドを介してコード内のCSS定義キーフレームにアクセスする
var keyframeAnimation = require("tns-core-modules/ui/animation/keyframe-animation");
var view = page.getViewById("view");
var animationInfo = page.getKeyframeAnimationWithName("bounce");
animationInfo.duration = 2000;
var animation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
animation.play(view).then(() => {
console.log("Played with code!");
});import {KeyframeAnimation} from "tns-core-modules/ui/animation/keyframe-animation";
let view = page.getViewById<viewModule.View>("view");
let animationInfo = page.getKeyframeAnimationWithName("bounce");
animationInfo.duration = 2000;
let animation = KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
animation.play(view).then(() => {
console.log("Played with code!");
});