CSS3 アニメーションをより魅力的にする方法_html/css_WEB-ITnose

CSS3 アニメーションを使用するとき、トランジションやアニメーションの作成などの実践的な方法の使用方法についてよく議論します。ただし、アニメーションの力は、単一のアニメーションがどのように機能するかではなく、複数のアニメーションがどのように組み合わされて素晴らしい効果を生み出すかに焦点を当てています。優れたアニメーションデザインは、私たちの作品を際立たせることができます。

ディズニーのアニメーションの 12 の基本原則では、「魅力」を「俳優の魅力的な性質」と定義しており、リアリティ、スタイル、アニメーションの内容をオーバーレイして、視聴者にとってリアルで本物だと感じられる鮮やかなキャラクターを作成する方法について説明しています。 。

ストライプに応用され大きなインパクトを与えた技術です。 Stripe は支払い処理業者であり、Web サイトに支払いフォームを埋め込むツールを提供しています。フォーム、特に使用されているアニメーションが美しくデザインされています。

この記事では、複数のアニメーションを組み合わせて 1+1 が 2 より大きい効果を実現する方法について説明し、この知識を実際に使用する方法を示します。

ソーシャル カード

この例では、アニメーションを使用してユーザーに詳細と Web サイトまたは他のソーシャル アカウントへのリンクを表示します。

CodePen の Tuts+ (@tutsplus) による Web 上のアニメーションに魅力を追加するペンを参照してください。

ボタンを押すと、カードが動的にポップアップします。通常のモーダル ウィンドウを使用する代わりに、アニメーションを使用してさらに面白くします。

魅力的にするために、いくつかのアニメーションを使用しました。各セクションのアニメーションでは、各要素が順番に紹介されます。これにより、視聴者は自分が押したことを理解しやすくなり、一連のコンテンツとアニメーションによって視聴者の目を後続のアイコンに引き付けることができます。

HTMLを書く

アニメーションを開始する前に、ボタンが必要です。押すとカードが表示されます。コンテンツが初めて表示されるとき、カードは非表示になります。

rreee

ボタンは画像とテキストです。押すとカードが表示されます。このカードは、閉じるボタン、詳細セクション、アバター、ソーシャル アイコンを含むアイコン バーの 4 つのセクションで構成されています。この例では、Entypo コレクションのインライン SVG を使用します。

スタイル

アニメーションに入る前に、いくつかのボタンとメモリカードのスタイルを追加しましょう。まず、ボタン:

<button class="show-card">        <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=48">          Press here   </button>       <article class="card">          <section class="close">            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">              <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>    </svg>          </section>           <section class="details">             <h2 class="name">Donovan Hutchinson</h2>             <p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>           </section>           <section class="headshot">             <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=280">           </section>           <section class="icon-bar">             <ul>               <li>                 <a href="http://cssanimation.rocks">                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">                     <path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>                   </svg>                 </a>               </li>               <li>                 <a href="https://twitter.com/cssanimation">                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">                     <path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>                   </svg>                 </a>               </li>               <li>                          <a href="https://github.com/cssanimation">                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">                     <path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>          </svg>                 </a>               </li>           </section>         </article>         

注: 一部のブラウザではフォーカスされた状態のオブジェクトに追加のボックスが追加されるため、ステートメントのアウトライン: none; を .show-card 要素に追加しました。 (これは見たくないものです)

次に、カードのさまざまな部分にスタイルを追加します。

.show-card { background: #fff; border-radius: 4em; border: 0.25em solid #1fa756; color: #1fa756; font-size: 18px; left: 50%; line-height: 1.5; padding: 1em 1em 1em 4em; position: absolute; top: 50%; transform: translate(-50%, -50%); outline: none; }.show-card img { border-radius: 50%; left: 0.3em; position: absolute; top: 0.25em; width: 3em; }

ここではカード表示を「なし」に設定していることに注意してください。次に、JavaScript を使用して表示方法を制御します。

基本的な表示と非表示

CSS を使用しないことに同意しました。 ここでは、まず連絡先情報を表示および非表示にするための基本的なアクションを記述します。次に、小さな JavaScript (ここでは jQuery が使用されています) コードを使用して、クリックされたオブジェクトに基づいて対応するクラスを追加および削除します。

.card { bottom: calc(50% - 8em); display: none; height: 16em; left: calc(50% - 10em); position: absolute; transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33); width: 20em; }.close { color: #aaa; cursor: pointer; height: 1em; opacity: 0; position: absolute; right: 0.5em; top: 0.5em; width: 1em; z-index: 10; }.details { position: absolute; bottom: 2.5em; background: #fff; border-radius: 0.25em; height: 0; overflow: hidden; text-align: center; width: 20em; }.name { color: #333; font-weight: bold; margin: 3em 0 0; opacity: 0; }.description { color: #666; font-size: 1em; font-weight: 200; line-height: 1.5; margin: 0.75em 2em 2em; opacity: 0; }.headshot img { border-radius: 50%; border: 0.5em solid #fff; display: block; height: 6em; margin: -3em auto 0.5em; opacity: 0; width: 6em; }.icon-bar { background: #1fa756; border-radius: 0.25em; left: -1em; position: absolute; right: -1em; top: 13em; }.icon-bar ul { display: flex; flex-display: column; flex-wrap: nowrap; padding: 0; }.icon-bar li { display: inline-block; font-size: 2em; opacity: 0; padding: 0 1em; width: 33%; }.icon-bar a { color: #fff; text-decoration: none; }

さて、他に何も起こらなければ、CSS の display 属性を使用してカードの表示と非表示を制御できるはずです。

表示と非表示の例はここにあります:

CodePen の Tuts+ (@tutsplus) による Pen Basic JS の表示/非表示を参照してください。

アニメーションの前に

前の準備で、いくつかの追加のスタイルを追加する必要もあります。隠し要素。

うわー

これらの要素はアニメーションを実行する前に遅延があるため、最初に非表示にする必要があります。

基本アニメーション

これまでの準備ができたら、アニメーションを操作してみましょう。上記の Javascript コードは、カードが表示されるときに、カードに表示状態を追加します。このクラス名を使用して、カードのさまざまな部分にアニメーションを追加できます。

これを行うには、CSS アニメーション プロパティと一連のキーフレームを使用します

これは、CSS で汎用アニメーションを作成し、再利用するのに役立ちます。フェードなどの単純なアニメーションは、一度定義すると、複数の場所で使用できます。
キーフレームを定義する方法を示すために、まずフェードインとフェードアウトのアニメーションを作成しましょう。

// Show the card on clicking the button$('.show-card').click(function(e) {  $('.card').addClass('show').css('display', 'block');  $('.show-card').addClass('hide');});// Hide the card on clicking the "x"$('.card .close').click(function(e) {  $('.card').css('display', 'none');});

キーフレームは、パーセンテージとして定義された一連のステップです。任意の数のステップを指定できますが、ここでは開始 (0%) と終了 (100%) のキーフレームのみを定義します。フェードインでは、不透明度 (0) から開始し、完全な不透明度 (1) で終了します。フェードアウトのアニメーションはその逆です。

ボタンを表示または非表示にするとき、ボタンにアニメーション属性を適用できます。

.close, .name, .description, .headshot img, .icon-bar li { opacity: 0; }.details { height: 0; }

animation 属性は、持続時間 0.4 秒、遅延 1 秒のフェードイン アニメーションを使用するようにカードに指示します。アニメーションが終了すると、最後の状態 (順方向) が維持され、イーズアウト タイム カーブが使用されます。

.hide クラスがボタンに適用されると、フェードアウト アニメーションの番になります。

弾性効果のある時間曲線

最初に紹介する部分はアイコンバーです。ここはリンクの場所なので、最初に注目してもらえるように目立つようにしたいと考えています。

我们可以通过使用具有时间曲线的属性创建有趣的效果。这里，我们将使用一个cubic-bezier在图标出现的时候添加一些“反弹”效果。

首先，我们将创建一些简单的关键帧，使图标栏有高度逐渐变大的效果。

@keyframes show-icon-bar {  0% { height: 0; }  100% { height: 4.5em; }}

现在当show类被添加到图标栏上的时候，我们可以看到这组关键帧的效果。

.card.show .icon-bar { animation: show-icon-bar .5s forwards cubic-bezier(.64,1.87,.64,.64); }

弹性的效果是通过使用cubic-bezier方法创建的。时间性方法描述一整个个动画变化的速度。可以设计成超出动画的开始和结束的范围，这里指高度。通过这种方法创建一个反弹动画。

动画延迟

介绍了图标栏的实现，接下来我们讨论细节和头像部分的动画。我们希望这一部分出现在图标栏显示以后，为了实现这一目标，我们将使用animation-delay属性。

.card.show .details { animation: show-detail-container 0.7s 0.5s forwards cubic-bezier(.54,-0.38,.34,1.42); }

施加到details部分的动画被设置为持续时间为0.7秒，并且延迟 0.5秒。这意味着动画将会在图标栏出现之后
启动。

我们依旧使用了贝塞尔时间方法在这里给它一些反弹。

接下来，我们定义的容器关键帧的动画。

@keyframes show-detail-container {  0% { height: 0; }  100% { height: 13.5em; }}

在show-detail-container动画关键帧开始与容器无形为零的高度，并以动画的形式全部撑开。同样使用cubic-bezier，使动画有反弹。

合并多个动画

多个动画可以在一个同一属性里应用。只要动画彼此不冲突，它们可被用于添加到细微的动画。多个动画的定义，就像一个动画，以逗号分隔。

在这个例子中，我们会在头像，名称和描述的内容上使用淡入动画，而在同一时间使用弹出式功能，使他们有放大的效果。

如果我们使用一个单一的动画，都使用cubic-bezier效果，淡入淡出的效果会出现反弹，并看起来很奇怪。所以，我们将在淡入淡出上使用普通线性效果，而缩放带有反弹的效果。

首先我们定义弹出pop-in的关键帧。

@keyframes pop-in {  0% { transform: scale(0.7); }  100% { transform: scale(1); }}   

它使用scale改造让每个元素开始小，扩展至正常大小。

让我们带到内容里面内容。每个元件具有两个动画，并且每个元件都具有稍长的动画延迟来错开。

.card.show .headshot img { animation: fade-in 0.4s 1.2s forwards, pop-in 0.6s 1.2s forwards cubic-bezier(.64,1.87,.64,.64); }.card.show .name { animation: fade-in 0.3s 1.3s forwards, pop-in 0.3s 1.3s forwards cubic-bezier(.64,1.87,.64,.64); }.card.show .description { animation: fade-in 0.3s 1.4s forwards, pop-in 0.3s 1.4s forwards cubic-bezier(.64,1.87,.64,.64); }

关闭图标

关闭图标动画使用我们前面定义的fade-in关键帧来实现淡入。

.card.show .close { animation: fade-in 0.3s 1.3s forwards; }

采取行动的时候到了

我们现在只需要展现社交的图标了。当呈现动画的时候，观众的注意力将会集中在动画结束的地方。这意味着观众眼睛会跟着动画，最后落在我们希望他们选择的图标上面。(阴谋…)

我们会再次使用这些动画的延迟属性，以确保它们是最后出现的。首先，我们定义一个动画图标的关键帧：

@keyframes show-icon {  0% { opacity: 0; transform: rotateZ(-40deg); }  100% { opacity: 1; transform: rotateZ(0); }}

每个图标在淡入会旋转一点点，我们现在可以把该动画附到每个图标上，使用延迟错开它们。

.card.show .icon-bar li { animation: show-icon 0.5s forwards cubic-bezier(.64,1.87,.64,.64); }.card.show .icon-bar li:nth-child(1) { animation-delay: 1.8s; }.card.show .icon-bar li:nth-child(2) { animation-delay: 1.9s; }.card.show .icon-bar li:nth-child(3) { animation-delay: 2s; }

把这些放在一起，我们现在有个一点击按钮就弹出非常漂亮的社交卡片。

最后再说一点

最后，我们需要添加一个hide行动来用动画把关闭按钮和卡片关闭了。首先，我们将更新的JavaScript。在按下关闭图标时，JavaScript等待一秒钟，然后使用display: none在关闭卡片。

$('.show-card').click(function(e) {  $('.card').addClass('show').css('display', 'block');  $('.show-card').addClass('hide');});$('.card .close').click(function(e) {  $('.card').addClass('hide');  setTimeout(function() {    $('.card').css('display', 'none').removeClass('show').removeClass('hide');  }, 1000);  $('.show-card').removeClass('hide');});

这给我们一秒钟的时间来操作卡片 - 我们让它掉到屏幕的底部。实现这一目标的关键帧，如下所示：

@keyframes drop-card {  100% { bottom: -100%; transform: rotateZ(20deg); opacity: 0; }}

然后，我们把动画加到卡上。

.card.hide { animation: drop-card 1s forwards cubic-bezier(.54,-0.38,.34,1.42); }

演示

把上面的拼接在一起，你可以看到这样的效果

See the Pen Adding Appeal to Your Animations on the Web by Tuts+ (@tutsplus) on CodePen.

关于前缀和浏览器兼容性的说明

动画的浏览器兼容性很好。不过这还要看你的观众，他们应该属于大部分吧。确保基本显示和隐藏功能工作顺利是很重要的。

总结

通过使用多个动画，尤其是对animation-delay，我们让本来很简单的组件变得更具吸引力。动画通过每个元件引导观众，达到我们的意图。

动画是一个在设计中非常重要的部分。突出重点的方式可以帮助浏览者了解你的意图，以及提高你的工作质量信誉和信心。

本文根据@Donovan Hutchinson所译，整篇译文带有我自己的理解和意思，如果有译得不好的地方或者不对之处，还请大家指点。如需转载此译文，须注明英文出处：http://webdesign.tutsplus.com/tutorials/adding-appeal-to-your-animations-on-the-web?cms-23649