この方法で形状を構築する方法を複数見つけることができますが、アニメーション化することを計画している場合は、ジオメトリと、異なる構造的選択が動きにどのように影響し、キーフレームコードを簡素化するかについて考える価値があります。この場合、最も単純な手法は、上に丸みを帯びた2つの垂直長方形を使用し、回転し、オーバーラップして心臓の形を形成することです。サイズはパーセンテージを使用して設定されており、幾何学的な考慮事項で絶対に配置されているため、コンテナサイズを変更することで元の形状を簡単に拡張できます。長方形は時計回りに45度回転して反時計回りに回転して、心臓の左右の部分を形成します。
<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>background-color: red;
</span> <span>content: "";
</span> <span>height: 80%;
</span> <span>left: 25%;
</span> <span>position: absolute;
</span> <span>top: 2%;
</span> <span>transform: translateZ(0) rotate(-45deg);
</span> <span>width: 50%;
</span><span>}
</span>
<span><span>.heart::after</span> {
</span> <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>残りの部分は、長方形の変換点オリジンポイントを調整して、長方形が重複する正方形の領域の中心にポイントが並んでいることです。変換オリジンアプローチを使用する代わりに、絶対位置宣言を調整することで同じ外観を実現できます。しかし、それは後にキーフレームコードを複雑にするでしょう。なぜなら、それは私たちのために作業を行うために変換スケール関数に頼るのではなく、より詳細に位置を制御することを強制するからです。
変換点は、変換が適用される前に座標系に関して計算する必要があります（たとえば、タート（）関数は、適用される要素とともに座標系を回転させるため、変換は座標系に影響を与える可能性があるためです。に）。繰り返しますが、その点の長さの比率はその点の位置を決定します。Xの位置が長方形の中心で50％であることがわかりますが、Y位置は上部から測定された長方形の高さの68.75％で計算されます。 （55*100％/80 = 68.75％）。両方の長方形が同じ変換オリジンポイント位置を共有しているため、特定の対称性アプローチを使用すると、ここでも報われます。<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
</span><span>}</span>そして今、私たちは美しい対称的なハートの形をしています。長方形ごとに異なるインセットボックスシャドウを追加して、すべてのふっくらと3Dにすることができます。
心の音
<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>transform-origin: 50% 68.75% 0;
</span><span>}</span>
<span><span>.heart::before</span> {
</span> <span>box-shadow: -8px -14px 10px 0 black inset;
</span><span>}
</span>
<span><span>.heart::after</span> {
</span> <span>box-shadow: -15px 10px 14px 0 black inset;
</span><span>}</span>
ここに、アニメーションの外側で静的なスタイルが必要な場合、曲がったスタイルがどのように読み取られるかを次に示します。
静止状態と曲げ状態の間の遷移と、元の安静時に戻ると、1つの心臓が鼓動されます。キーフレームのパーセンテージは、順番に、安静時および屈曲スタイルを効果的に宣言します。ただし、オーディオと同期するには、アニメーションがどのくらいの時間再生されるべきか、どのハート状態を使用するキーフレームの割合を正確に知る必要があります。いくつかの便利なオーディオソフトウェアがサウンドを分析し、キーフレームに必要なタイミング情報に注意するのに役立ちます。 Audacity
でオーディオ信号を分析します<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>background-color: red;
</span> <span>content: "";
</span> <span>height: 80%;
</span> <span>left: 25%;
</span> <span>position: absolute;
</span> <span>top: 2%;
</span> <span>transform: translateZ(0) rotate(-45deg);
</span> <span>width: 50%;
</span><span>}
</span>
<span><span>.heart::after</span> {
</span> <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>Audacity®は、音を録音および編集するためのオープンソースのクロスプラットフォームソフトウェアです。使いやすく、同様のオーディオやビデオ編集ソフトウェアの経験がない場合でも、必要な情報を取得するのに多くの努力が必要ではありません。
オーディオ信号をAudacityで開くと、音波が自動的に表示されます。ほとんどの場合、これは、信号の形状を見ることで、オーディオの特定の部分がどこで開始され、終了するかを認識するのに十分です。他のいくつかのスペクトログラムビューモードがより良い役立つ信号を取得することはめったにありませんが、その場合、スペクトログラムの横にあるドロップダウンメニューを介して異なるモードを切り替えることができます。
スペクトログラムをクリックすると、タイムラインの瞬間が表示されます。これは、各ハートビートがいつ始まり、終了し、心が曲がった状態にあるかを知る方法です。再生ボタンを使用してオーディオ全体を再生するか、セグメントを選択し、アニメーションキーフレームに必要な時間に注意してください。ハートビートの場合、4つの異なるハートビートがあり、波形を見ると簡単に認識できます。各ハートビート、それが開始、終了し、屈曲した状態にあるときに注意する必要があります。これを簡単にするために、スプレッドシートアプリを使用して、ハートビートとそのタイミングを数秒でメモします。
オーディオタイミングをキーフレームのタイミングに翻訳します
数秒でタイミングができたら、数学を使用して、オーディオの長さをアニメーションで使用する100％の長さ表記に正規化します（100を掛けてオーディオ時間の合計で除算）。これは、キーフレームのパーセンテージを取得する方法と、ハートをリラックスするか曲げても、特定のキーフレームに適用するスタイルを取得する方法です。
このテーブルから読み取りキーフレームパーセンテージを作成し、それぞれに関連付けられたスタイルを記入できます。心臓と境界線を拡大することに加えて、心臓の色を変えてアニメーションをもう少し強調します。 Transformを使用して心臓の長方形をスケーリングし、各長方形にも異なる回転値があるため、長方形ごとに2つの異なるアニメーションを作成する必要があります。
左の長方形の@KeyFramesコードは次のとおりです（右の長方形のアニメーションは、回転方向の値とボーダーラジウスの位置でのみ異なります）：
<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>background-color: red;
</span> <span>content: "";
</span> <span>height: 80%;
</span> <span>left: 25%;
</span> <span>position: absolute;
</span> <span>top: 2%;
</span> <span>transform: translateZ(0) rotate(-45deg);
</span> <span>width: 50%;
</span><span>}
</span>
<span><span>.heart::after</span> {
</span> <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>アニメーションは、JavaScriptを使用してHeart Elementに追加する特別なクラスに割り当てられます。同じイベントで、オーディオプレイをトリガーします。これは、アニメーションとオーディオが同時に始まり、すべての同期作業が報われることを保証する方法です。
<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span> <span>border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
</span><span>}</span>codepenのSitePoint by SitePoint by SitePoint（@SitePoint）のペンCSSアニメーションを参照してください。
その他のCSSサウンドアニメーション！
あなたが聞くことができるより多くのCSSグッズに飢えているだけでなく、観察しますか？ここにあなたが分解して学ぶことができるいくつかの例が次のとおりです：
ハートビートサウンド（パブリックドメイン）
鉄道交差信号（パブリックドメイン）
Cuckoo Clock Sound（パブリックドメイン）
STOPWATCH IMAGE（パブリックドメイン）
CC-by 3.0ライセンスの下でIwan Gabovitchが不足している
あなたはどうですか？以前にアニメーションでサウンドを使用したことがありますか？あなたが見たいCSSアニメーションの特定のケースはありますか？コメントでそれについてすべて教えてください！
HTML5オーディオとCSSアニメーションの同期に関するよくある質問（FAQ）オーディオ再生レートに基づいてCSSアニメーションの速度を制御するにはどうすればよいですか？ HTML5オーディオ要素の「PlaybackRate」プロパティを使用して、オーディオ再生レートに基づくCSSアニメーションの速度。このプロパティを調整することにより、オーディオの再生をより速くまたは遅くすることができ、CSSアニメーションはそれに応じて速度を調整します。 、モバイルデバイスでHTML5オーディオとCSSアニメーションを同期できます。ただし、モバイルブラウザにはデスクトップブラウザーと比較していくつかの制限と違いがあることに注意してください。たとえば、一部のモバイルブラウザでは自動演奏オーディオを許可していないため、オーディオファイルの再生ボタンを追加する必要がある場合があります。
CSSアニメーションをオーディオの変更に対してより応答させるには、Web Audio APIを使用できます。このAPIを使用すると、オーディオデータをリアルタイムで分析し、オーディオの現在の状態に基づいてCSSアニメーションを調整できます。はい、WordPressサイトでHTML5オーディオを備えたCSSアニメーションを使用できます。 WordPressテーマのカスタムCSSおよびHTMLセクションにCSSアニメーションとHTML5オーディオを追加することも、カスタムCSSとHTMLを追加できるプラグインを使用できます。以上がCSSアニメーションをHTML5オーディオと同期しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
