css动画 和 js动画_CSS动画使网站栩栩如生

css动画 和 js动画

Animation is fast becoming an essential design tool that’s increasingly used to help our users understand and interact with our work.

动画正Swift成为一种必不可少的设计工具，越来越多地用于帮助我们的用户理解我们的作品并与我们的作品进行交互。

Recent years have seen great improvements in browser and mobile support for animations. In fact, all modern desktop browsers come with built-in support for CSS animations. Together with other great tools that CSS provides, there’s never been a better time to add movement to our designs. But why is animation so important? And how can you start using it today?

近年来，浏览器和移动设备对动画的支持有了很大的进步。 实际上，所有现代桌面浏览器都内置了对CSS动画的支持。 与CSS提供的其他出色工具一起，再没有比现在更好的时候为我们的设计增加动感了。 但是为什么动画如此重要？ 您今天如何开始使用它？

为什么CSS动画在我们的设计中很重要？ (Why CSS Animation is Important in our Designs?)

Motion is a huge part of how we communicate and how we understand the world around us. It’s an instinct we’re born with.

运动是我们沟通和了解周围世界的重要部分。 这是我们天生的本能。

We’ve evolved to be really good at noticing movement. Movement protects us by helping us notice changes in our environment and it adds an extra layer of communication to the words we say. Observing movement and visual cues enable us to understand complex actions and ideas in a nonverbal way.

我们已经发展为非常擅长注意到运动。 运动帮助我们注意到环境的变化，从而保护了我们，并为我们所说的单词增加了一层额外的交流。 观察运动和视觉提示可以使我们以非语言方式理解复杂的动作和想法。

Animation on the web can be leveraged to the same effect and can add extra depth and meaning to the conversation between our users and the User Interface.

网络上的动画可以达到相同的效果，并且可以为我们的用户与用户界面之间的对话增加深度和意义。

For example, we can animate elements off the screen when removing them, and animate them back in when adding new ones. This simple transaction helps us understand where they went. It adds to our mental model of what we’re working with, and makes the interaction richer and more meaningful.

例如，当删除元素时，我们可以在屏幕外为它们设置动画，而在添加新元素时，可以将它们重新设置为动画。 这个简单的交易有助于我们了解他们去了哪里。 它增加了我们正在工作的思维模型，并使交互更加丰富和有意义。

We can use animation to draw attention to certain elements of an interface or to tell stories and lead users on a journey from one step to the next.

我们可以使用动画来吸引人们注意界面的某些元素，或者讲故事并引导用户一步一步地前进。

Adding animations and transitions to micro interactions within a website or application can help engage users and surprise and delight them. They are also a powerful way of giving users feedback on the actions they are taking such as hovering over clicks, clicking on buttons or filling in forms. This all adds to the conversation and helps add personality to an interface.

在网站或应用程序内的微交互中添加动画和过渡效果可以帮助吸引用户并使他们感到惊喜。 它们也是向用户提供反馈的强大方式，例如，将鼠标悬停在点击，点击按钮或填写表单上。 所有这些都增加了对话，并有助于为界面增加个性。

那JavaScript呢？ (What About JavaScript?)

CSS isn’t the only way to bring animation to our designs but it is the simplest to get started with. Since the early days of jQuery, we’ve had ways of animating and moving page elements using JavaScript.

CSS不是将动画引入我们设计的唯一方法，但它是最简单的入门方法。 从jQuery的早期开始，我们就已经有了使用JavaScript动画和移动页面元素的方法。

More recently, powerful packages such as GreenSock’s GSAP have brought advanced animation to browsers—even for those that don’t support CSS animations. They bring fine-grained control over the way animations work, great backward compatibility and all sorts of helpful functions.

最近，诸如GreenSock的GSAP之类的功能强大的程序包为浏览器带来了高级动画，甚至对于不支持CSS动画的程序也是如此。 它们带来了对动画工作方式的细粒度控制，强大的向后兼容性以及各种有用的功能。

But this does come at a cost. Adding extra JavaScript dependencies to our project makes our projects heavier, resulting in longer download times and time spent processing the page. This might not matter on a fast broadband-connected desktop, but for much of the world relying on slower connections and mobile devices, we need to keep performance in mind.

但这确实要付出代价。 向我们的项目中添加额外JavaScript依赖项会使我们的项目变重，从而导致更长的下载时间和处理页面所花费的时间。 在快速连接宽带的台式机上，这可能无关紧要，但是对于世界上大多数依赖较慢连接和移动设备的用户，我们需要牢记性能。

There’s also the added complexity of bringing in JavaScript frameworks, as it adds more maintenance and possible sources of errors.

引入JavaScript框架也增加了复杂性，因为它增加了更多的维护和可能的错误源。

Still, JavaScript-based animation options have come a long way and are a powerful and useful option for when we want to add advanced or complex animation.

尽管如此，基于JavaScript的动画选项已经走了很长一段路，并且当我们要添加高级或复杂动画时，它是一种功能强大且有用的选项。

Before we reach for the plugins, though, there’s a lot we can do with CSS: it’s the quickest and simplest way to get started with animation today.

不过，在接触这些插件之前，我们可以使用CSS进行很多工作：这是当今开始动画的最快，最简单的方法。

用CSS制作动画 (Animating with CSS)

Web browsers support CSS out of the box (to varying degrees).

Web浏览器开箱即用地(不同程度上)支持CSS。

Just like we would use `font-size` or `background` properties in our stylesheets to craft our visual design, we can also use `transition`, `animation`, and `keyframes` to create movement.

就像我们在样式表中使用“ font-size”或“ background”属性来制作视觉设计一样，我们也可以使用“ transition”，“ animation”和“ keyframes”来创建运动。

Transitions can be used to smooth the changing styles during a hover state; keyframe animations can be set up to cycle through multiple states and can even be combined together to create complex effects. We can control animation timing, direction and more just using the built-in CSS properties which, after a brief learning curve, will look very familiar to anyone with even basic CSS skills.

过渡可用于在悬停状态下平滑变化的样式。 关键帧动画可以设置为在多个状态之间循环，甚至可以组合在一起以创建复杂的效果。 我们可以使用内置CSS属性来控制动画的时间，方向以及更多内容，经过短暂的学习之后，即使对于具有基本CSS技能的人来说，它们也会看起来非常熟悉。

Knowing what can be done with CSS is helpful when it comes to making the choice between using `keyframes` or reaching for JavaScript.

在使用“关键帧”或使用JavaScript之间做出选择时，了解CSS可以做什么。

为什么不今天开始？ (Why Not Start Today?)

The great thing about CSS animations is that there’s nothing stopping you from starting right away. All you need is a web browser and a text editor, or you can begin creating immediately using a service like CodePen.

CSS动画的妙处在于，没有什么可以阻止您立即开始。 您只需要一个Web浏览器和一个文本编辑器，或者您就可以使用CodePen之类的服务立即开始创建。

There are many reasons you should get excited about animating in the browser. There are many great examples of how animations have boosted not only the aesthetics of a site but have also increased interaction and reduced confusion. But not only is animation a practical tool, working with them is fun and creative; it brings the web to life.

在浏览器中进行动画设置有很多原因，您应该对此感到兴奋。 有许多很好的例子说明动画如何不仅提高了网站的美观度，而且还增强了交互性并减少了混乱。 但是，动画不仅是一种实用的工具，而且与它们一起工作既有趣又富有创造力。 它使网络栩栩如生。

I’ve recently teamed up with SitePoint to create a new course, Animating with CSS. I’m excited about it, in fact, I think it’s vitally important to teach people about how to do new things on the web and make it a better place. This is an extension of my work on CSSAnimation.rocks, another great learning resource for all things CSS animation.

我最近与SitePoint合作创建了一门新课程，即CSS动画。 我对此感到很兴奋，实际上，我认为教人们如何在网络上做新的事情并使之变得更美好至关重要。 这是我在CSSAnimation.rocks上工作的扩展， CSSAnimation.rocks是有关CSS动画的另一种很棒的学习资源。

Let’s have a look at what you’ll learn in the course:

让我们来看看您将在本课程中学到的知识：

1. Animating in the Browser

   在浏览器中制作动画

   Setting the scene for the course and looking at the benefits and principles of animation.

   设置课程场景并查看动画的好处和原理。

2. Transitions – From A to B

   过渡-从A到B

   Learn to add smooth transitions as styles change between two states.

   学会在两种状态之间改变样式时添加平滑过渡。

3. Keyframe Animations

   关键帧动画

   Learn how to craft more complex motion with the `@keyframes` and `animation` properties; first the theory and then practical examples.

   了解如何使用`@ keyframes`和`animation`属性制作更复杂的运动； 首先是理论，然后是实际例子。

4. Easing and Timing Functions

   缓动和定时功能

   Discover how to add character and control the timing of your animations with easing and cubic bezier functions.

   探索如何使用缓动和三次方贝塞尔曲线功能添加角色并控制动画的时间安排。

5. Putting it all Together

   全部放在一起

   Taking things to the next level, we’ll combine effects to create multiple transitions and multiple animations.

   将事物提升到一个新的水平，我们将结合效果来创建多个转场和多个动画。

6. Browser Considerations

   浏览器注意事项

   We’ll discuss browser support, vendor prefixes and performance considerations to make sure your animations work on as many devices as possible.

   我们将讨论浏览器支持，供应商前缀和性能注意事项，以确保您的动画能够在尽可能多的设备上运行。

7. Accessibility and Animations

   辅助功能和动画

   Finally, we’ll tackle accessibility concerns and ensure our animations don’t cause issues by being distracting or cause motion sickness.

   最后，我们将解决可访问性问题，并确保动画不会因分散注意力或引起晕车而引起问题。

Further to the theory and practical examples covered in the course, there are many places to look for inspiration. I’m a fan of checking out the animated concepts on Dribbble. There’s a load of UI inspiration on Use Your Interface, and also Capptivate for iOS inspiration, or if you’re looking for cinematic inspiration, be sure to bookmark Art of the Title.

除了本课程涵盖的理论和实践示例之外，还有很多地方可以寻求启发。 我喜欢检查Dribbble上的动画概念。 在“ 使用您的界面”上有大量的UI灵感，还有Capptivate对于iOS的灵感，或者，如果您正在寻找电影的灵感，请确保将“标题的艺术”添加为书签。

There’s so much that animation can bring to our designs. It can help us communicate, it can help us tell stories, and it can be a fun, creative outlet. It’s easy to get started, but the sky’s the limit in what we can create. So why not get started, try something new and see how motion can bring your designs to life!

动画可以带给我们的设计很多。 它可以帮助我们进行交流，可以帮助我们讲故事，并且可以是一个有趣而有创意的出路。 入门很容易，但是天空是我们创造的极限。 那么，为什么不上手，尝试一些新的东西，看看运动如何使您的设计栩栩如生！

翻译自: https://www.sitepoint.com/css-animations-bringing-websites-to-life/

css动画 和 js动画