如何让你的CSS3动画更具吸引力_html/css_WEB-ITnose

来源：五一七教育网

当我们使用CSS3动画时，我们经常讨论如何使用创造过渡，动画等实战方法。然而动画的强大之处不是集中在单个动画是如何工作的，而是多个动画结合起来，创造出令人震撼的效果。良好的动画设计可以使我们的作品脱颖而出。

迪斯尼的动画的12个基本原则定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实，风格，和动画的物质叠加起来创建生动的角色，使得观众觉得真实而有趣。

它是一种被应用于stripe并造成巨大影响的技术。stripe是一种付款处理器，并提供了工具，在网站的嵌入支付形式。这些形式被设计得非常精美，特别是其使用的动画。

在本文中，我将讨论如何将多个动画联合起来实现1+1大于2的效果，并实战演示如何使用这些知识。

在这个例子中，我们将使用动画来展示与细节和链接到用户网站网站或其他社交账户。

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

当按下按钮时，它会动态弹出一张卡片。而不是仅仅使用一个普通的模态窗口，我们将使用动画来使它更有趣。

为了使它有吸引力，我使用了几个动画。各个部分的动画都按顺序介绍每个元素。这有助于帮助观众理解他们已经按下，并且内容和动画的顺序有助于把观众的目光吸引到后续图标。

开始做动画之前，我们需要一个按钮，按下之后卡片会显示出来。内容第一次出现的时候，卡片会被隐藏掉。

   
  Donovan Hutchinson
 Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.