CSSでアニメーション化する方法

公開: 2014-12-27

私たちはウェブサイトでアニメーションを見て、それらがウェブデザインにもたらすエネルギーと多様性を楽しむことにかなり慣れてきました。 それらは目を引くものであり、サイトに視覚的な興味を追加するための優れた方法であり、一般的にユーザーにとってよりエキサイティングな体験になります。

従来はGIF、SVG、WebGL、およびバックグラウンドビデオで実現されていましたが、アニメーションはCSSで効率的に作成することもできます。 CSSアニメーションのブラウザサポートは大幅に改善され、非常に人気が高まっています。互換性のあるブラウザには、Firefox 5以降、IE 10以降、Chrome、Safari 4以降、Opera12以降があります。

今日は、ステップバイステップのデモでCSSアニメーションを作成するための基本を説明します。 その後、5つのアニメーションの例を確認してください。 これらすべてのアイデアを使用して、独自のプロジェクトのアニメーションを作成できます。

CSSアニメーションの基本

明らかに、5つの楽しいCSSアニメーションに飛び込む前に、アニメーションがどのように機能するかの基本をカバーすることが重要です。
たとえば、キーフレームはCSSアニメーションの重要なコンポーネントです。 Adobe Flashを使用したことがあるか、ビデオ編集の経験がある場合は、この用語に精通している可能性があります。 その場合、キーフレームという用語はまさにあなたが考えるものです。それは特定のアクションを指定する方法です。

以前にCSSスタイルシートで@keyframesに出くわしたことがあるかもしれません。 この@keyframesの内部では、アニメーションのスタイルとステージを定義します。 フェードアウト効果の良い例を次に示します。 

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

作成したフェードアウトキーフレームの基本は次のとおりです。

  • わかりやすい名前：この場合、fadeOut。
  • アニメーションのステージ：Fromは0％に設定され、Toは100％に設定されました。
  • 各段階で適用されるCSSスタイル。

この例では他のステージが指定されていないため、デフォルトでは、 Fromは0％、 Toは100％になります。

アニメーションサブプロパティを持つ特定のアクション

スタイルを設定するには、もう少し行う必要があります。 animationプロパティをサブプロパティでスタイル設定する必要があります。 キーフレームがアニメーションの外観を定義する場合、アニメーションサブプロパティはアニメーションの特定のルールを定義します。 これらを使用すると、アニメーションシーケンスの進行方法のタイミング、期間、およびその他の重要な詳細を構成できます。

アニメーションプロパティは、CSSセレクター内で@keyframesを呼び出すために使用されます。 アニメーションには、複数のサブプロパティが含まれる場合があります。 サブプロパティの例は次のとおりです。

モーショングラフィックスアーティストとの提携

アニメーションほどデザインに命を吹き込むことはできません。 しかし、アニメーターやモーショングラフィックスアーティストと一緒に仕事をしたことがない場合、モーションは異世界のように感じるかもしれません。 あなたがpについて考えているなら...

  • Animation-name： @keyframes at-ruleの名前で、アニメーションのキーフレームを記述します。 前の例の名前fadeOutは、animation-nameの例です。
  • アニメーション期間：アニメーションが1つの完全なサイクルを完了するのにかかる時間の長さ。
  • Animation-timing-function：アニメーションのタイミング、具体的にはアニメーションがキーフレームをどのように遷移するか。 この機能には、加速度曲線を確立する機能があります。 例としては、線形、イーズイン、イーズイン、イーズアウト、イーズインアウト、またはキュービックベジェがあります。
  • Animation-delay：要素がロードされてからアニメーションが開始されるまでの遅延。
  • Animation-iteration-count：アニメーションを繰り返す回数。 アニメーションを永遠に続けたいですか？ infiniteを指定して、アニメーションを無期限に繰り返すことができます。
  • Animation-direction：アニメーションがシーケンスを実行するたびに方向を変えるか、開始点にリセットして繰り返すかどうか。
  • Animation-fill-mode：実行前と実行後の両方でアニメーションによって適用される値。
  • Animation-play-state：このオプションを使用すると、アニメーションシーケンスを一時停止および再開できます。 例としては、none、forwards、backwards、またはその両方があります。

最高のブラウザサポートのためにすべてをまとめる

ここでは多くのことが行われており、用語は少し混乱する可能性があります。 しかし、キーフレームがアニメーションの外観とさまざまなアニメーションステージを定義し、animationプロパティがサブプロパティを使用して遅延、方向、タイミングなどのアニメーションオプションを定義することがわかりました。

ベンダーまたはブラウザのプレフィックスに精通している可能性があります。これらは、アニメーションを操作するときに必要です。 最高のブラウザサポートがあることを確認する必要があります。 標準のブラウザプレフィックスは次のとおりです。

  • ChromeとSafari： -webkit-
  • Firefox： -moz-
  • Internet Explorer： -ms-

Internet Explorer 10はトランジションにプレフィックスを必要としませんが、すべての変換にはプレフィックスが必要です。 OperaはWebKitスタイルを認識するため、カバーされています。

移行開始

  • -webkit-transition
  • -moz-transition
  • transition

変換開始：

  • -webkit-transform
  • -moz-transform
  • -ms-transform
  • transform

別の種類のアニメーションを試してみませんか？ PhotoshopでGIFを作成してください！ 方法は次のとおりです。

動作中の5つのアニメーション

基本を説明したので、使用するコードを作成しましょう。

アニメーション1：円から正方形
アニメーション-1つ

これまでに説明したすべての概念を確実に理解できるように、この最初の1つについて詳しく説明しましょう。 アニメーションは円として始まり、正方形に変形します。

最初にdivを作成することは、アニメーションをテストするための優れた方法です。 

<div class=”animationOne”>
</div>

それでは、 @keyframesを設定しましょう。 正方形には4つの辺があり、0％の開始点が必要なため、このアニメーションには5つのステージがあります。 以下に示すようにプレフィックスを使用しますが、チュートリアルの残りの部分では、基本的な部分だけを使用してプレフィックスを使用します。 

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

次に、いくつかのスタイルを作成して、各段階で境界線の半径がどのように見えるかを決定しましょう。 

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

次に、 background-colorプロパティを追加して、アニメーションの各段階を区別できるようにします。 

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

最後に、アニメーションをテストdivに適用しましょう。 

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

アニメーションプロパティは通常、省略形で記述されているため、コードで実際に行われていることは次のとおりです。

  • アニメーション名はcircle-to-squareです。
  • アニメーションの長さは2sです。
  • アニメーションの遅延は1sです。
  • アニメーションの反復回数はinfiniteであるため、無期限に続行されます。
  • そして、アニメーションの方向はalternateです。 これは、最初から最後まで再生され、最初に戻ることを意味します。

アニメーション2：回転
アニメーション-2

このアニメーションでは、オブジェクトの回転が可能です。 

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

アニメーションプロジェクトを分離しておくために、この2番目の例では別のdivを作成することを忘れないでください。 この例では、アニメーションをdiv自体に追加するため、背景色を追加しました。

このアニメーションの長さは2秒で、3秒の遅延があります。 アニメーションの反復回数は5回なので、このプロジェクトは5回アニメーション化してから停止します。 アニメーションは、奇数回（1,3,5、…）ごとに逆方向に再生され、偶数回（2,4,6、…）ごとに通常の方向に再生されます。

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

アニメーション3：拡大してちらつき
アニメーション-3

これは、ページ上の他の要素と比較して目を引く、目立つため、ボタンに最適なアニメーションです。 これは、 :hover状態に含める価値のあるものかもしれません。 

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

これをテストするには、次のスターターdivが必要です。 

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

アニメーション4：テキストスライド
テキストにアニメーションを追加しましょう。 このプロジェクトでは、テキストを左から1回スライドさせます。
アニメーション-4

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

アニメーション5：フェードイン
アニメーション-5

サプライズコンテンツはありますか？ 後で表示したいコンテンツについては、このフェードインアニメーションを確認してください。 ここには多くのオプションがあります。フェードインは高速または低速、1回または複数回などです。 

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

CSS3アニメーションは、Webサイトを動かしたり溝を掘ったりするのに最適です。 アニメーションを作成するための基本的な概念がわかったので、アニメーションの可能性は無限大です。 何をアニメートしますか？