アニメーション:HTMLとCSSでパンダアニメーションを作成してください
あなたは美しいアニメーションを作成するためにCSSを使用することができます。このチュートリアルでは、HTMLとCSSのみを使用してキーフレームアニメーションを作成します。次のレベルにあなたのWeb devのスキルをください。この記事はPratik Shuklaによって書かれました。
CSSを使用すると、JavaScriptを使用せずにHTML要素の美しいアニメーションを作成することができます.あなたは、ビルトインを使うことができます
@keyframe ルールでは、各キーフレームのスタイルを定義することによって、アニメーションシーケンスのステップを制御します.KeyFrameを使用するには、単に
@keyframes ルールと名前を与える.その名前は、アニメーションをそのキーフレーム宣言と一致させるためのプロパティとして使用されます.このチュートリアルでは、CSSアニメーションを紹介し、HTMLとCSSのみを使用したキーフレームパンダアニメーションを作成します.
今日、我々は以下をカバーします:
CSSアニメーションの基礎
CSSでは、アニメーションが徐々にスタイルのOSを変更することができます.我々は、我々のアニメーションのためにキーフレームを指定することによって、これを最初にします.キーフレームは、各要素が与えられた時間に持っているスタイルを保持するものです.
使用
@keyframes ルールは、CSSスタイルを指定し、アニメーションは徐々に新しいスタイルに変更されます.最初に希望のアニメーションを要素にバインドしなければなりません.例えば、我々はバインドできます
animation に<div> 要素は徐々に赤から黄色に背景色を変更します.このアニメーションは3秒間続きます./* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
}
animation-duration プロパティは、アニメーションが完了するまでの時間を定義します.デフォルト値は0秒ですので、このプロパティを指定しないと、アニメーションは発生しません.また、CSSアニメーションを作成するときにパーセンテージを使用することができます.これにより、より多くのスタイル変更を使用できます.以下は、その背景色を示す例を参照ください
<div> アニメーションが30 %完了したときの要素の変更、50 %の完了、100 %の完了./* The animation code */
@keyframes example {
0% {background-color: red;}
30% {background-color: orange;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
CSSアニメーションのプロパティ
CSSプロパティがどのようにルールで動作するかの基本的なことを理解したので、より多くの機能のためにアニメーションに適用できる主なプロパティを議論しましょう.
animation-name : アニメーション名を決定するdiv {
animation-name: panda;
}
animation-delay : このプロパティはアニメーションの開始時に遅延を作成するanimation-delay: 5s;
animation-iteration-count : このプロパティは、アニメーションが実行される回数を定義しますanimation-iteration-count: 4;
animation-timing-function : このプロパティは、たとえば速度曲線を定義します.linear : 最初から最後まで同じ速度ease : スロースタート、その後、高速、ゆっくり終了ease-in : スロースタートease-out : スローフィニッシュanimation-direction : このプロパティは、アニメーションが前方または後方に再生されるかどうかを決定するanimation-direction: reverse;
animation-fill-mode : このプロパティは、アニメーションが再生されていないときに対象の要素のスタイルを決定します.これは、最初のキーフレームを再生するまで、アニメーションが要素を変更しないCSS規則をオーバーライドする方法です.none : アニメーションは実行されるまでどんなスタイルでも適用されませんforwards : 要素は、最後のキーフレームで設定されたスタイル値を保持しますbackwards : 要素は、最初のキーフレームで設定されたスタイル値を取得しますboth : アニメーションは、両方の方向(前方と後方)のアニメーションプロパティを拡張するパンダアニメーションの概要
今、私たちがCSSアニメーションについて学んだことを適用し、CSSとHTMLを使用して、私たち自身のアニメーションをゼロから構築しましょう.フィールドを歩いているパンダのシンプルなアニメーションを作ります.あなたが選択した場合、また、アニメーションに音楽を含めることができます.下記の最終製品を見てください.
ここでは、我々のアニメーションを作成する必要があります:
1 )テキストエディタ
2 )アニメーション用スプライトシートファイル
3 )選択したオーディオファイル
HTMLとCSSのスキル
アニメーションを作成するには、スプライトシートを使用します.スプライトシートは、タイル張りのグリッド配置でいくつかの小さなグラフィックスを含むビットマップイメージファイルです.我々はこのアニメーションのために使用されるスプライトシートを見てください.
ここでは、12種類のパンダの画像があることがわかります.一度一緒にアニメーションとして、我々は歩くパンダアニメーションを持っている!そのため、2つのファイルを作成します.
Moving_Panda.html and Moving_Panda.css . I’ve added all the required files here for you to download.
You can also view and download code from GitHub.
HTMLコードの作成
最初にHTML部分から始めましょう.注意:HTMLコードはCSSアニメーションが移動効果を作成するために変更されるものです.HTMLファイルにCSSコードを追加できますが、きちんとしたために、2つの異なるファイルを作ります.
以下のコードを見て、各部分の詳細な説明の続きを読む.
<html>
<head>
<title>Panda Walking Animation</title>
<link rel="stylesheet" href = "Moving_Panda.css">
</head>
<body>
<a href="#" onclick="play()">
<audio id="audio" src="https://git.io/JUW4q" loop="loop"></audio>
<script>
function play()
{
var audio = document.getElementById("audio");
audio.play();
}
</script>
<div id="panda"></div>
<div id="street"></div>
</a>
</body>
</html>
<html> HTMLドキュメントのルートを表すタグ.<head> タグ(これはメタデータを表示するために使用されます(ユーザに表示されないウェブページに関する他の特定の情報).ここで私たちは<title> HTMLファイルの場合.<link> CSSファイルをHTMLファイルにリンクする要素.ここでrel 属性は、CSSファイルのスタイルシートであるリレーションシップを表します.href は外部のCSSファイルをリンクするために使われる.<body> 要素.WEBページに表示するコードを書きます.最初に、我々は<a> を返します.play() 我々のオーディオのための機能.<audio> 要素オーディオファイルを取得します.ここで我々はそれを与えるid . ここでは、オーディオがループで再生されることがわかります.play() 関数は、ユーザーがパンダをクリックするとトリガされます.スクリプトはオーディオ要素をid . <div> 通りの要素.CSSコードを書く
今CSSアニメーション!以下のコードを見て、各部分の詳細な説明の続きを読む.
body
{
background: url(https://git.io/JUW4t);
background-size: cover;
overflow: hidden;
}
#panda
{
position:relative;
top:600px;
background: url(https://git.io/JUW4L);
width:250px;
height:330px;
animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;
}
@keyframes walking_animation
{
0%{background-position:0px;}
100%{background-position:3000px;}
}
@keyframes move_forward
{
0%{transform:translateX(-100px);}
100%{transform:translateX(1366px);}
}
#street
{
position:relative;
top:600px;
border-bottom:5px groove green;
}
overflow:hidden メインウィンドウのレイアウトを制御する.300px 上部から、パンダの実際のイメージ画像を追加します.私たちのパンダファイルの幅が3000px , しかし、我々はちょうど12のイメージから第1のイメージを表示したいです.これを行うには、幅と高さを変更します.最初のパンダの高さは330px . 幅については、それぞれのフレームに対して12等分しますので、幅は0です250px . Walking_animation . それはパンダのすべての12の画像を通過しますが、それは元の位置から移動しません.X軸上で移動するには、次のアニメーションを追加しますmove_forward これは、画面上の右から左に画像を移動します.Walking_animation パンダのすべての12の画像を通過します.これを行うにはbackground-position から0 to 3000px , は画像の幅です.Move_forward 変換プロパティを使用して、X軸上にパンダを移動します.私たちはパンダを養う-100px , そして、それは画面の端に移動します.border-bottom そして、位置を設定します.次に学ぶこと
おめでとう!CSSとHTMLを使用してアニメーション化する方法を学びました.あなたのWeb devのスキルは今でもさらに進んでおり、新しいトピックに取り組む準備が整いました.CSSスキルを継続したい場合は、Webアプリケーションのテーマについて学ぶ必要があります.
教育課程CSS Theming. for Professionals どのようにテーマに気づいているアプリを開発することを教えている.あなたはテーマの周りの実用的な方法で手を取得します.最後には、非常にカスタマイズ可能な見事なアプリを作成することができます.
あなたがウェブ開発とCSSに新しいならば、コースから始めてくださいWeb Development: Unraveling HTML, CSS, and JavaScript HTML、CSS、JavaScriptの短いツアーで.
ハッピーラーニング!
ウェブdevとcssについての続きを読む
Reference
この問題について(アニメーション:HTMLとCSSでパンダアニメーションを作成してください), 我々は、より多くの情報をここで見つけました https://dev.to/educative/animate-css-code-create-a-panda-animation-with-html-css-34i2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol