UI HACK 
※本ページはプロモーションが含まれています。
サイトの一部分にアニメーションを作成したい時は
CSS keyframesとanimationプロパティを
使用して実装します。
この記事では、CSS keyframesの使い方、アニメーションの作成方法、特定の要素をアニメーション化する方法を併せてご紹介！
- CSS keyframesの使い方
- CSS keyframesとanimationプロパティを使用してアニメーションを実装する方法
- CSS keyframesとJavaScriptを組み合わせて動的なアニメーションを作成する方法
CSS keyframesとanimationを使用するには、次の手順を実行します。
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.example-class{
animation: example 5s linear infinite;
}上記の例で、exampleという名前のアニメーションは5秒かけて、背景色を赤から黄色に変更する。
.example-classに対してこのアニメーションを適用する。
CSSの@keyframesルールは、アニメーションを作成するために使用されます。@keyframesルールは、アニメーションの最初と最後の状態を定義し、その間にある状態を指定することで、アニメーションを定義します。各状態は、時間の経過に応じて変化します。
@keyframes animationName {
from {
//initial state
}
to {
//final state
}
}また、各状態を指定するために、プロパティとその値を指定します。
@keyframes animationName {
0% {
//initial state
}
100% {
//final state
}
}CSSアニメーションを適用するには、animationプロパティを使用します。
selector {
animation: animationName 5s;
}ここで、animationNameは@keyframesルールで定義したアニメーションの名前で、5sはアニメーションの時間です。
CSS の animation プロパティは、HTML エレメントにアニメーションを適用するために使用します。使用方法は次のようになります。
<div class="animated-element">Animated Element</div>.animated-element {
animation: myAnimation 3s ease-in-out;
}
@keyframes myAnimation {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}この例では、animation プロパティを使用して、class “animated-element” の HTML エレメントにアニメーションを適用しています。アニメーションの名前は “myAnimation”、アニメーションの時間は 3 秒、イージングは “ease-in-out” です。@keyframes で定義されたアニメーションは、HTML エレメントが X 軸方向に 100px 移動します。
CSSキーフレームとアニメーションを使用してアニメーションを作成する方法についてです。
アニメーションで使用するCSSプロパティとそれらの値を指定して、キーフレームを定義します。例えば、要素をフェードイン・アウトさせる簡単なアニメーションを作成するために、次のようなキーフレームを使用できます。
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}ここで、animationの値は、’animation-name duration timing-function’ の順番で指定することで、アニメーション名、持続時間、タイミング関数を設定します
HTMLにおいて、上記のCSSを適用するためのクラスを指定します。
<div class="fade-element">This element will fade in and out</div>上記のようにすることで、’fade-element’というクラスが持っているanimationプロパティが適用され、3秒間かけてfadeInOutアニメーションが実行されます。
アニメーションで使用するCSSプロパティとそれらの値を指定して、キーフレームを定義します。例えば、特定の要素を左から右に移動させるアニメーションを作成するために、次のようなキーフレームを使用できます。
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}アニメーションを適用する要素に対して、animationプロパティを使用してアニメーションを設定します。例えば、上記のmoveRightアニメーションを適用するには、次のように記述します。
.move-element {
animation: moveRight 2s linear;
}ここで、animationの値は、’animation-name duration timing-function’ の順番で指定することで、アニメーション名、持続時間、タイミング関数を設定します。
HTMLにおいて、上記のCSSを適用するためのクラスを指定します。
<div class="move-element">This element will move from left to right</div>上記のようにすることで、’move-element’というクラスが持っているanimationプロパティが適用され、2秒間かけてmoveRightアニメーションが実行され、要素が左から右に移動します。
ちなみに、animation-iteration-countプロパティを使用することで、アニメーションを何回繰り返すかを指定することもできます。
例えば、3回繰り返す場合は、animation-iteration-count: 3;と記述します。
CSS keyframesを使用して、複数の要素を一度にアニメーション化する方法は、以下のようになります。
<div class="animated-element">Animated Element 1</div>
<div class="animated-element">Animated Element 2</div>
<div class="animated-element">Animated Element 3</div>.animated-element {
animation: myAnimation 5s infinite;
}@keyframes myAnimation {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}この例では、.animated-elementクラスの要素が5秒間、無限に水平方向に100px移動するようにアニメーションされます。
複数の要素を一度にアニメーション化するためには、同じクラス名を持つ要素に対して同じアニメーションを適用するだけです。
一度にアニメーション化される要素が多いと、アニメーション効果が混ざり合って見えにくくなる可能性があります。
その場合は、要素ごとにアニメーションを異なる時間やスタイルで適用することもできます。
.animated-element:nth-child(1) {
animation: myAnimation 5s infinite;
}
.animated-element:nth-child(2) {
animation: myAnimation 2s infinite;
}
.animated-element:nth-child(3) {
animation: myAnimation 8s infinite;
}CSS keyframesとJavaScriptを組み合わせて、動的なアニメーションを作成する方法は、以下のようになります。
<div id="animated-element">Animated Element</div>#animated-element {
animation: myAnimation 5s infinite;
}@keyframes myAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}var element = document.getElementById("animated-element");
// アニメーションを開始
element.style.animationPlayState = "running";
// アニメーションを停止
element.style.animationPlayState = "paused";この例では、JavaScriptでanimationPlayStateプロパティを変更し、アニメーションを開始または停止しています。
JavaScriptを使用することで、アニメーションの開始・停止、アニメーションの時間やスタイルなど、動的に操作することができます。
JavaScriptを使用したアニメーション制御には、animationプロパティを使用したもののほかにも、 requestAnimationFrameなどがあります。
これらの方法を使用することで、より高度なアニメーションを作成することができます。
今回は、CSS keyframesとanimationプロバティ
の実装を説明しました。
アニメーションを実装するのに当たって必要不可欠なので、この機会に覚えて下さい。
Twitterも見てみる？
