无论你身处何处，你总是能够发现一些很酷的新动画效果。如果动画是2016年网站建设工作中必备的设计元素，那么创新的悬停效果将是2017年即将到来的新设计趋势。
感谢在“Material Design”中的流行元素和苹果的动画指南对小的交互移动效果的关注，使得悬停效果正在回归。但是，除了过去的粘性，闪光，弹跳和旋转效果，动画是应该是简单，聪明以及令人愉快。最好的悬停效果能够帮助用户以及增强体验，从而提升网页设计的整体体验效果。
悬停效果的范围可以大到影响整个屏幕的运动，小到定向提示或导航元素。
1.停留于主页上面的运动
地址：https://designshack.net/wp-content/uploads/haus.gif
悬停效果可以是你引导用户体验的关键部分。使用填充整个屏幕的动画，额外的悬停效果可以变得相当迷人。
上面的案例Haus，利用在屏幕上移动的卡通人物，使得页面的整体视觉变得很惊人。你可能不会想到动画上面竟然还保留有触发效果，但用你鼠标悬停时，字符以及卡通人物会转变成另一个动作。在没有触发时，每个字符只是在屏幕上滚动或者运动。
当使用这样的全屏悬停动画时，诀窍是让用户刚到愉悦，而不是使他们刚到压力。这是一个很棘手的中间地带。通过保持设计的其余部分简单（在上面的这个案例中，比如使用了黑色、平坦的背景与容易阅读无衬线白色字体），动画可以允许有较大的空间作为视觉的缓冲。这是屏幕上的一个技巧，鼓励用户在滚动到后续屏幕之前进行交互。
2.按钮效果
地址：https://dribbble.com/shots/1041259-Homepage-Icon-States-GIF
一个简单的动画实际上可以鼓励用户点击设计中的按钮。看起来很简单，对吧？
这也是这种类型的动画如此受欢迎的原因的一部分。
设计一个按钮效果，以帮助用户更好地了解你的网页设计，从而获得最大的影响。上面的例子Luke Etheridge你可以明显的看到，鼠标触发和未触发显示的是不同的两种状态，通过改变颜色，告诉用户点击以后将发生什么。
3.图片展示和幻灯片效果
地址：https://dribbble.com/shots/2223174-Video-Production-Landing-Animation
网页设计中包含了各种图片展示和幻灯片效果。在这些效果中，几乎每个都包含了指引图标，来达到幻灯片之间的转换移动，告诉用户应该如何前进或后退。
设计标准运动的关键，我们可以从“Material Design”的规范中获得一些灵感。
· 运动很快；
· 运动清晰；
· 运动需要具有凝聚力。
运动发生的方式应该是不会给用户带来多余的疑问的，也就是用户能从一开始就理解触发将给他带来什么结果的。它能够在内容元素之间创建明显的关联，并且一切在用户看来都是需要能够无缝对接在一起的。
4.导航和菜单
地址：http://oxenmade.com/
不管你喜欢与否，网站设计隐藏导航的风格是一个逐渐流行的设计元素。大量的动画或悬停效果可以帮助用户更好地浏览内容和设计。
通过汉堡包图标的出现或消失的同时，在屏幕上弹出或摆动相关的信息，动画菜单项可以作为一个强大的定向工具。
Oxen Made，这个案例在主页上使用两种方式的悬停动画，引导用户在接下来的行动中采取设计者预期的行动。“菜单”在悬停时更改颜色，以让用户知道它是可点击的元素。然后，完整菜单从页面的左侧摆出。 此外，一个小的三角形箭头在右角弹起，使用来自活动菜单按钮的相同的黄色，表示卷轴上有更多内容。
这些微妙的动作发生在相对繁忙的背景视频播放时。使用柔和的动作与背景足以抓住用户的注意力，并提供充足的站点链接方向和导航。
5.表单和字段
地址：https://dribbble.com/shots/2197140-New-Material-Text-Fields
一些最好的悬停效果例子是使用表格和字段。几乎每个被访问的网站都要求用户做出某种行动或留下某些信息。通过简化步骤或增加过程中的趣味性，使得用户更容易提供这些信息，从而增大你收集该信息的可能性。
这并不意味着在设计上采用的样式就必须是无聊的。你要做的是增强那些提示在视觉上的体验，例如通过提示字段来帮助用户确认在该位置需要输入什么（以及以什么格式）以及确认成功的反馈机制。
在上面的例子中，我们可以看到两件事。用户被告知要输入什么信息，他们可以清楚的看到提示条目，并键入相关的信息，点击“登录”按钮，确认动画快速的出现在屏幕上，流畅切愉悦的完成一整个登入操作。用户不必二次猜测他们的信息是否输入正确，他们可以继续下一步。
总结
悬停动画是那些看起来很棘手和沉重的设计技术之一。但现实是，使用CSS动画，几乎任何人都可以轻松添加一个简单的动画。它们是轻量级的，相信有很多动画效果设计师想要与你分享代码。
只要记住在你的网页设计中使用这条黄金规则：任何的元素或动作都需要有意义。注意不要分散用户对他们需要采取的行动的注意力。玩得开心，祝你好运！
----图文来自：design shack
----由深圳网站建设公司-Clh翻译编辑整理，为您提供更多有关深圳网站建设、网站设计、网页设计及其他互联网应用服务。