How to make your CSS3 animations more attractive_html/css_WEB-ITnose

When we use CSS3 animations, we often discuss how to use practical methods to create transitions, animations, etc. However, the power of animation is not focused on how a single animation works, but how multiple animations are combined to create stunning effects. Good animation design can make our work stand out.

Disney’s 12 Basic Principles of Animation defines “charm” as “the captivating quality of an actor.” It describes how to use reality, style, and animated substance to superimpose to create vivid characters that make The audience found it real and interesting.

It is a technology that has been applied to stripes and made a huge impact. Stripe is a payment processor and provides tools to embed payment forms on websites. The forms are beautifully designed, especially the animations used.

In this article, I will discuss how to combine multiple animations to achieve the effect of 1 1 greater than 2, and demonstrate how to use this knowledge in practice.

Social Cards

In this example, we will use animation to show the user with details and links to their website or other social account.

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

When the button is pressed, it will dynamically pop up a card. Instead of just using a normal modal window, we'll use animations to make it more interesting.

To make it attractive, I used several animations. Each section's animation introduces each element in sequence. This helps the viewer understand that they have pressed, and the sequence of content and animation helps draw the viewer’s eye to subsequent icons.

Write HTML

Before starting the animation, we need a button. When pressed, the card will be displayed. The card will be hidden the first time the content appears.

<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>         

A button is an image and some text. When pressed, it displays the card. The card is made up of four sections, the close button, a details section, the avatar and the icon bar containing the social icons. In this example, we use inline SVG from the Entypo collection.

Styles

Before getting into animation, let’s add some button and memory card styles. First is the button:

.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; }

Note: We have added a statement outline: none; to the .show-card element because some browsers will add an extra box to the object in the focused state. . (This is what we don’t want to see)

Then, we add styles to the various parts of the card.

.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; }

Please note that here we set card display: none. We will then use JavaScript to control how it displays.

Basic display and hiding

We agreed not to use CSS. Here we first write the basic actions to display and hide contact information. Then use a small piece of JavaScript (jQuery is used here) code to add and delete corresponding classes based on the clicked object.

// 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');});

Now, if nothing else happens, we should be able to use the CSS display attribute to control the display and hiding of cards.

Examples of show and hide are here:

See the Pen Basic JS show/hide by Tuts (@tutsplus) on CodePen.

Before animation

With the previous preparations, we also need to add some additional styles to hide various elements.

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

These elements will have a delay before they animate, so we need to hide them first.

Basic animation

With the previous preparations, let’s start operating the animation. The above Javascript code adds a show state to the card when it is displayed. We can use this class name to add animation to various parts of the card.

To do this we will use the CSS animation property and a series of keyframes.

This helps to create generic animations in CSS and reuse them. Simple animations, such as fades, can be defined once and used in multiple places.
To show how to define keyframes, let's first create fade-in and fade-out animations.

@keyframes fade-in {  0% { opacity: 0; }  100% { opacity: 1; }}@keyframes fade-out {  0% { opacity: 1; }  100% { opacity: 0; }}

Keyframes are a series of steps, defined as percentages. They can be any number of steps, but in our case we only define the start (0%) and end (100%) keyframes. On the fade-in we start at opacity (0) and end up at full opacity (1). The animation of fade-out is just the opposite.

When buttons are shown and hidden, we can apply animation attributes to them.

.show-card { animation: fade-in 0.4s 1s forwards ease-out; }.show-card.hide { animation: fade-out 0.4s forwards ease-out; }

The animation attribute tells the card to use fade-in animation with a duration of 0.4 seconds and a delay of 1 second. After the animation ends, the last state (forwards) will be maintained and the ease-out time curve will be used.

When the .hide class is applied to the button, it is the fade-out animation’s turn.

Time curve with elastic effect

The first part we will introduce is the icon bar. Since this is the location of the link, we want it to stand out so people pay attention first.

我们可以通过使用具有时间曲线的属性创建有趣的效果。这里，我们将使用一个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