最新のHTML/CSSチャンネルニュースレターを購読し、ここをクリックしてを購読してください。

以下は、最新のフロントエンドリソースです

ルイ?ラザリスが提供する20を超える無料のフロントエンド學(xué)習(xí)リソース
ドノバン?フチンソンの新しいCSSアニメーションコース

フロントエンドの學(xué)習(xí)リソース

フロントエンド開発者として、最終製品を使いやすく、簡単にアクセスできるようにするための最新のテクノロジーとツールを習(xí)得する責(zé)任があります。

ルイス?ラザリスは、フロントエンド開発者向けに提供する20を超える無料のドキュメントとガイドの問題11のリストを私たちと共有しています。

このリストは印象的で、機(jī)能プログラミング、ES6、プログレッシブWebアプリケーション、アクセシビリティなどのリソースが含まれています。好きなリソースを自由に選択してください。私にとって、CSSリファレンスおよびタイポグラフィマニュアルは、すぐにチェックアウトしたリソースです。

cssリファレンス

CSSリファレンスは、CSS屬性が次のように編成されるビジュアルガイドです。

アニメーション

• 背景
• ボックスモデル
• flexbox
• 位置決め
• 遷移
• typeLine
すべてのCSSプロパティのリストにアルファベット順にアクセスすることもできます。

このガイドは、各屬性と可能な値を明確で簡単な用語で説明し、結(jié)果を説明するための優(yōu)れたビジュアルを提供します。

TypeLine Manual

優(yōu)れたWebタイポグラフィの原則、ベストプラクティス、およびコードを?qū)g用的でアクセスしやすい方法で教えるツールは、私の推奨に値します。私の意見では、タイポグラフィマニュアルがこれを行います。

これはGitHubのオープンソースプロジェクトで、カバー：

タイプデザイン

• font
• Webスタイルガイド
最後の部分は、相対ユニット、垂直スペース、フォントサイズ、色などのトピックに焦點を當(dāng)てたかなりの數(shù)のコード例を具體的に示しています。

Webタイポグラフィに関するほとんどのリソースが少し怖く、用語に満ちている場合、タイポグラフィマニュアルはあなたを驚かせます（絶対に驚きです）。

webアニメーション

私たちは動きに気づくのが非常に得意であるように進(jìn)化しました...動きと視覚的な手がかりを観察することで、非言語的な方法で複雑な動きとアイデアを理解することができます。

Web上のアニメーションは、同じ効果を活用し、ユーザーとユーザーインターフェイスの間の會話に深さと意味を追加することができます。

CSSアニメーションを使用してウェブサイトの活力を與える - ドノバンハッチンソン＆ガイrotledge

アニメーションは、Webデザインと開発の重要な要素になっています。ユーザーインターフェイスデザイナーは、ユーザーがウェブサイトでタスクを?qū)g行するために微妙なアニメーションエフェクトを使用する方法を教えてくれます。

現(xiàn)在、Webコンテンツをアニメーション化する最も一般的な方法は次のとおりです。

CSS Transitionおよび@KeyFrames Animation

javascript

Webアニメーションの詳細(xì)については、SitePoint Premiumは、アニメーションのスーパースターDonovan Hutchinsonが描いた新しいコース（CSSを使用したアミメーション）を提供します。
• このコースは、効果的なユーザーインターフェイスアニメーションの原則と、CSSトランジションと@KeyFrames、緩和とタイミング機(jī)能、複數(shù)のアニメーション、スクロールアニメーション、ブラウザのサポート、アクセシビリティを使用するという実裝をカバーしています。
  記事を好む場合は、私のお気に入りのサイトポイントの一部をご紹介します：
  CSSマスターからのアニメーションの提案。これは、アンジェラ?モリーナが主催するティファニー?ブラウンとのSetePointのライブQ＆Aの記録ですデザインでアニメーションを使用するガブリエルゴーシャの4つのヒント
• Louis lazaris
によるCSS Animation-Fill-Mode屬性を理解してください
• アニメーション：Daniel Schwarzによるよりスマートな相互作用を作成するために緩和を使用してくださいWeb Animation APIを使用して、Dudley Storeyによってページを?qū)g現(xiàn)します。
• WebアニメーションにCSSを使用することは、私の好みの方法ですが、場合によっては、ジョブを完了するには強力なJavaScriptライブラリが必要です。
JSソリューションを必要とする複雑なWebアニメーションについては、「Beyond CSS：Dynamic Dom Animation Library」をチェックしてください。最初の部分では、Anime.jsの使用方法について説明し、2番目の部分では、強力なモジュール式オープンソースアニメーションエンジンであるKute.jsを使用する方法を説明して、DOMをアニメーション化します。
お楽しみに、より多くのコンテンツがまもなくリリースされます。

このシリーズでJavaScriptアニメーションライブラリをご覧になりたい場合は、お問い合わせください！

unstplash.comによって提供される特集畫像

CSSアニメーションに関するよくある質(zhì)問

CSS遷移とCSSアニメーションの違いは何ですか？ CSSトランジションとCSSアニメーションはどちらも、ウェブサイトにスムーズで魅力的なアニメーションを作成するための強力なツールです。 2つの主な違いは、制御と複雑さのレベルです。 CSSの遷移はよりシンプルで、要素の上でのホバリングなど、狀態(tài)の変化の結(jié)果として発生するシンプルなアニメーションを作成するために使用されます。一方、CSSアニメーションは、より多くの制御と複雑さを提供します。複數(shù)のステップとステージでより複雑なアニメーションを作成することができ、ユーザーの相互作用とは獨立して実行できます。 CSSアニメーションの學(xué)習(xí)を開始する方法は？

CSSアニメーションの學(xué)習(xí)を開始するのに役立つ多くのリソースがオンラインで利用できます。 Udemy、Scrimba、CodecademyなどのWebサイトは、このトピックに関する包括的なコースを提供しています。より技術(shù)的および詳細(xì)なガイドについては、Mozilla Developer Network（MDN）ドキュメントを參照することもできます。 CSSアニメーションを?qū)W習(xí)するための鍵は練習(xí)ですので、プロジェクトや演習(xí)を通じて學(xué)んだことを適用してください。

どのウェブサイトでCSSアニメーションを使用できますか？

はい、CSSアニメーションは任意のWebサイトで使用できます。ただし、すべてのブラウザがすべてのCSSアニメーションプロパティをサポートしているわけではないことに注意する必要があります。したがって、使用しているCSSプロパティの互換性を確認(rèn)して、すべてのブラウザでアニメーションが適切に機(jī)能することを確認(rèn)することを常にお勧めします。

CSSアニメーションリソースが集中していますか？

不適切に処理された場合、CSSアニメーションは多くのリソースを占有する可能性があります。ただし、アニメーションを最適化し、最小限の再描畫と再配置をトリガーするプロパティを使用することにより、ウェブサイトのパフォーマンスに大きな影響を與えることなく、スムーズで効率的なアニメーションを作成できます。

CSSアニメーションのキーフレームは何ですか？

キーフレームは、CSSアニメーションで使用され、アニメーションの段階を定義します。アニメーションの各ポイントで要素のスタイルを指定して、一連のアニメーション効果を作成することができます。

CSSアニメーションを応答する方法は？

CSSアニメーションの応答性を高めるには、メディアクエリを使用して、畫面サイズに基づいてアニメーションプロパティを調(diào)整できます。これにより、畫面のサイズに関係なく、すべてのデバイスで見た目および機(jī)能するアニメーションを作成できます。

JavaScriptでCSSアニメーションを使用できますか？

はい、JavaScriptを使用したCSSアニメーションを使用して、より複雑でインタラクティブなアニメーションを作成できます。 JavaScriptを使用して、アニメーションのタイミング、シーケンス、動作を制御することができ、それにより、より高いレベルのコントロールとインタラクティブ性を提供できます。

CSSアニメーションをデバッグする方法は？

CSSアニメーションは、ブラウザの開発者ツールを使用してデバッグできます。これらのツールを使用すると、アニメーションプロパティを確認(rèn)し、タイミングを確認(rèn)し、スローモーションでアニメーションシーケンスを表示できます。

CSSアニメーションを使用して、Webサイトのユーザーエクスペリエンスを向上させることはできますか？

絶対に！ CSSアニメーションは、視覚的な関心とインタラクティブ性を高めることにより、ウェブサイトのユーザーエクスペリエンスを大幅に向上させることができます。ユーザーの注意を誘導(dǎo)し、フィードバックを提供し、より魅力的で動的なユーザーインターフェイスを作成するために使用できます。

CSSアニメーションを使用することの制限は何ですか？

CSSアニメーションは強力なツールですが、いくつかの制限があります。特に複雑なアニメーションのために、多くのリソースを取り上げることができ、すべてのアニメーションプロパティがすべてのブラウザーによってサポートされているわけではありません。さらに、CSSを使用して複雑なアニメーションを作成することは、JavaScriptや他のアニメーションライブラリを使用するよりも挑戦的で時間がかかる場合があります。

以上が素晴らしいフロントエンドリソースとCSSアニメーションコースの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。