css动画 和 js动画

Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoint forums for her live Q&A on CSS Animations.

就在一周前，我们很幸运地让Tiffany Brown加入SitePoint论坛，进行了她关于CSS动画的实时问答 。

I think it’s fair to say that with over 2,200 views, it was pretty successful! In case you missed it, I’ve compiled the highlights from the event for your reading pleasure.

我认为可以说，拥有超过2200次观看 ，这是相当成功的！ 万一您错过了它，为了您的阅读乐趣，我整理了此次活动的重点内容。

Tiffany is a freelance developer based in Los Angeles. She’s the author of CSS Master and co-author of Jump Start HTML5. Before becoming a freelance developer, she was part of the Opera Developer Relations team and has worked in small agencies within Atlanta. Tiffany now spends her days educating the world in web development through her written books, blog, and articles.

Tiffany是位于洛杉矶的自由开发人员。 她是CSS Master的作者，也是Jump Start HTML5的合著者。 在成为自由开发人员之前，她是Opera开发人员关系团队的成员 ，并且曾在亚特兰大的小型机构工作。 蒂芙尼(Tiffany)现在花费大量时间通过她的书面书籍， 博客和文章来教育网络开发领域。

入门 (Getting Started)

问：我是一所社区大学的讲师。 我被要求研究并设计用于Web开发的Web开发AAS(2年制学位)。 有太多选择可供选择，当我试图对课程进行布局时，我不知所措。 对学生学习Web开发的途径有何建议？ 我想： (Q: I am an instructor at a community college. I have been asked to research and lay out a web development AAS (2-year degree) for web development. There are so many things to choose from, that I am overwhelmed when trying to lay out the curriculum. Any advice on a path for students to learn Web Development? I thought:)

• HTML/CSSHTML / CSS
• JavaScript/jQueryJavaScript / jQuery
• SQLSQL

主要问题是要使用哪些工具，框架，CMS等？ (The main problems are which tools to use, frameworks, CMS, etc?)

Kelle (staff): Hi Suzy, I can only really offer advice on the front-end side of things but I would think that basic HTML and CSS are an excellent place to start. With JavaScript, I think it’s always better to learn vanilla JavaScript first, and then introduce libraries so that students understand the difference between a language feature and library functionality.

Kelle(工作人员)： Suzy，您好，我只能在前端方面提供建议，但是我认为基本HTML和CSS是一个很好的起点。 使用JavaScript，我认为最好先学习原始JavaScript，然后再引入库，以便学生理解语言功能和库功能之间的区别。

Also helpful is pointing them towards the right resources, MDN is a great API reference I wish I’d had when I started out, for example.

将它们指向正确的资源也很有帮助，例如， MDN是我希望刚开始时会得到的很棒的API参考。

Tiffany: I think that’s a good path. HTML and CSS. I’d say teach JavaScript fundamentals rather than jQuery (or teach jQuery as part of JavaScript). SQL is still widely used, so that’s a good addition. I’d also add a server-side programming language:

蒂芙尼：我认为这是一条好路。 HTML和CSS。 我说的是讲授JavaScript基础知识，而不是讲授jQuery(或讲授jQuery作为JavaScript的一部分)。 SQL仍被广泛使用，因此是一个很好的补充。 我还要添加一种服务器端编程语言：

1. Ruby and its Rails framework,Ruby及其Rails框架，
2. Python and Django, and/orPython和Django，和/或
3. PHP + the Laravel framework.PHP + Laravel框架。

It’s also helpful to teach basic server configuration: Nginx or Apache. Roll a version management tool into the curriculum, ideally as part of a class on something else.

教授基本的服务器配置(Nginx或Apache)也很有帮助。 将版本管理工具引入课程中，最好是作为其他课程的一部分。

问：非常感谢。 香草JavaScript是一个很棒的主意。 您对Angular，Ember和Backbone的感觉如何？ (Q: Thank you so much. Vanilla JavaScript is a fantastic idea. How do you feel about Angular, Ember and Backbone?)

Kelle (staff): Ember and Backbone are tricky because they require a pretty decent JS background to use them well, in my opinion.

Kelle(员工)： Ember和Backbone棘手，因为我认为它们需要相当不错的JS背景才能很好地使用它们。

Angular is quite good for beginners, especially if they’ve taken the time to understand the fundamentals of the language beforehand. One of the good things about Angular (or bad depending on your perspective, but good for learning purposes), is that it comes bundled with a bunch of helpful things that ease people into some of the more important ideas in modern front-end development.

Angular对初学者来说非常好，特别是如果他们花时间事先了解了语言的基础知识。 关于Angular的优点之一(或取决于您的观点而定，但对于学习目的有好处)是，它与许多有用的东西捆绑在一起，使人们可以轻松掌握现代前端开发中的一些更重要的想法。

At SitePoint we use React almost exclusively, so I’m pretty biased about view frameworks; it’s definitely a steeper learning curve however!

在SitePoint，我们几乎只使用React ，所以我对视图框架有很大的偏见。 但是，这绝对是一条陡峭的学习曲线！

来宾：很棒的建议。 我很感激 感谢您的回应。 您对版本管理工具有何建议？ (Guest: Fantastic Advice. I am so grateful. Thank you for responding. Do you have a recommendation for a version management tool?)

Tiffany: I’d recommend Git or Mercurial. SVN is another option, but it isn’t a pleasant one. There are services that offer one or more of them, and students can sometimes get free plans. Do a Google/DuckDuckGo search for hosted Git or hosted Mercurial and you’ll find a bunch.

蒂芙尼：我建议使用Git或Mercurial 。 SVN是另一种选择，但这不是一个令人愉快的选择。 有提供其中一项或多项服务的服务，学生有时可以获得免费计划。 在Google / DuckDuckGo中搜索托管的Git或托管的Mercurial ，您会发现很多。

问：这是您始终想深入探讨的主题之一，但您却没有时间做。 我总是发现动画有点棘手而且很难学，所以我总是放弃。 但是，嘿！ 也许我的印象是错误的，而且毕竟不是那么棘手。 CSS动画有了很大的改进，但是我见过的大多数动画仍然包含点点滴滴的JS(大多数时候是jQuery)，因此在我看来，如果您想学习一种，就必须学习另一种。 (Q: This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all. CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (jQuery most of the time), so it looks to me that if you want to learn one, you have to learn the other.)

Tiffany: You can definitely write CSS animations or transitions that work independently of JavaScript. Animations and transitions can be triggered by :hover, :focus, or :checked states. In many cases, however, you’ll need to add or remove a class name in order to trigger an animation/transition. So, yes, you’ll need to learn at least a little bit of JavaScript (but just a little bit).

Tiffany：您绝对可以编写独立于JavaScriptCSS动画或过渡。 动画和过渡可以由:hover ， :focus或:checked状态触发。 但是，在许多情况下，您需要添加或删除类名才能触发动画/过渡。 因此，是的，您至少需要学习一点JavaScript(但只需一点)。

图书馆建议 (Library Recommendations)

问：您推荐哪些CSS动画库？ 我使用Animate.css (Q: What CSS animation libraries do you recommend? I use Animate.css)

Tiffany: Animate.css is the best-known, and furthest along, so that’s what I recommend. I am keeping an eye on Effekt.css though. It’s part of the HTML5 Boilerplate project. In my projects though, transitions have generally been enough.

蒂法尼(Tiffany)： Animate.css是最著名的，也是最远的，所以这就是我的建议。 不过，我一直在关注Effekt.css 。 它是HTML5 Boilerplate项目的一部分。 不过，在我的项目中，过渡通常就足够了。

问：嗨，您会建议使用Hover.css吗？ 还是为什么不呢？ (Q: Hi, would you recommend using Hover.css? Or why not?)

Tiffany: Hover.css is a library that I haven’t looked at closely enough to have an opinion about. It’s good that each item is self-contained. It let’s you cherry pick which parts to use and it has some clever animations too. I’m neither for nor against it.

蒂芙尼： Hover.css是一个我没有仔细研究过的库。 每个项目都是独立的，这很好。 它使您可以选择要使用的部件，并且还具有一些巧妙的动画效果。 我既不支持也不反对。

动画表演 (Animation Performance)

问：您是否建议仅在台式计算机或移动设备上使用动画？ 如果在移动设备上，有什么大问题需要注意？ (Q: Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?)

Tiffany: You can use animation on any device with a browser that supports it. If the device has a slower processor, you could conceivably run into some issues. But that’s something that (hopefully) you’ll discover during testing.

蒂芙尼：您可以在任何支持动画的设备上使用动画。 如果设备的处理器速度较慢，则可能会遇到一些问题。 但这是(希望)在测试期间发现的东西。

Now, if your audience includes a lot of Opera Mini users, do make sure that your animations and transitions use a fallback. Opera Mini doesn’t support transitions or animation of any kind, whether CSS or JavaScript.

现在，如果您的听众包括许多Opera Mini用户，请确保您的动画和过渡使用后备。 Opera Mini不支持任何形式的过渡或动画 ，无论是CSS还是JavaScript。

问：当我们使用动画时，您对性能的建议/关注点是什么？ 小心使用什么，避免什么？ (Q: What is your performance advice/concern when we use animations? What to use with care, what to avoid?)

Tiffany:

蒂芙尼：

Avoid reflows wherever possible

尽可能避免回流

A reflow occurs when the dimensions of an object change, or its position changes. So instead of animating top, right, bottom, and left; use transform and the translate functions. Margins and borders are other properties that can cause a reflow. I haven’t tested this, but I suspect that animating outline might be a good way to work around that.

当对象的尺寸更改或其位置更改时，就会发生重排。 因此，不要为顶部，右侧，底部和左侧设置动画； 使用transform和translate功能。 边距和边框是可能导致重排的其他属性。 我尚未对此进行测试，但是我怀疑动画outline可能是解决此问题的一种好方法。

Animating the width and height properties of an object (including the min-/max-properties in there) can also trigger a reflow. Sometimes you have to, though; using transform: scaleX() or transform: scaleY() isn’t always a good alternative to width and height.

对对象的宽度和高度属性(包括其中的min- / max-properties)进行动画处理也会触发重排。 有时候，您不得不； 使用transform： scaleX()或transform： scaleY() 并非总是宽度和高度的好选择。

问：我想知道在动画中使用元素是否有实际的限制，大小或数量。 (Q: I am wondering if there is a practical limit, size, or number, to using elements in animations.)

Tiffany: As with anything web related, however, the more elements you affect, the slower your page can potentially become. But I don’t know of any hard browser-based limits on how many elements can be animated at once. There is, however, an accessibility concern for people with seizure or vestibular disorders. You want to be careful of animating too many items at once. You also want to be careful not to create animations that take over an entire screen. WCAG2.0 has some guidelines for users with seizures that are helpful.

蒂芙尼：但是，与任何与网络相关的事情一样，您影响的元素越多，页面的潜入速度就可能越慢。 但是我不知道基于浏览器的硬性限制，一次可以动画多少个元素。 但是，癫痫发作或前庭疾病患者的可及性受到关注。 您需要注意不要一次设置太多动画。 您还需要注意不要创建占据整个屏幕的动画。 WCAG2.0为癫痫发作的使用者提供了一些指南 ，这些指南很有帮助。

问：到目前为止，从我所看到的内容来看，动画，转场和变换都用于“增强”，并且如果它们由于任何原因而损坏，我都不会注意到它们会影响UX。 我认为与“不使用没有某种形式的替代文字来传达相同信息的图像”的规则相同。 (Q: From what I’ve seen so far, animations, transitions, and transforms are used for “enhancement” and I’ve not noticed any use where if they broke for whatever reason UX would be affected. I assume the same type of rule as “don’t use images without some form of alternate text to convey the same message” applies. )

您知道这方面有任何潜在问题吗？ (Do you know of any potential problems in this regard?)

Tiffany: Yes! There’s a pretty significant difference in how transitions work versus CSS animations. If the user’s browser doesn’t support CSS animations, the animation will completely fail. You’ll need to use a JavaScript fallback. Transitions, on the other hand, will simply jump between the start and end states. The browser will ignore the transition-related properties. It’s not a pretty switch, but the UX won’t break.

蒂芙尼：是的！ 过渡与CSS动画的工作方式有很大的不同。 如果用户的浏览器不支持CSS动画，则动画将完全失败。 您需要使用JavaScript后备。 另一方面，转换只会在开始状态和结束状态之间跳转。 浏览器将忽略与过渡相关的属性。 这不是一个漂亮的开关，但是UX不会损坏。

Transitions and animations also need values that can be interpolated. You may have run into a situation of animating to or from height: auto, and found that it doesn’t work. That’s because the start and end values for a property need to be numeric, so that the browser can figure out the values in between. I’d also recommend that you don’t tie a mission-critical action like an Ajax form submission to the transitionEnd or animationEnd events. A user interaction can prevent those events from being triggered.

过渡和动画也需要可以插值的值 。 您可能遇到了向高空动画或从高空动画：auto的情况，并发现它不起作用。 这是因为属性的开始和结束值必须为数字，以便浏览器可以找出介于两者之间的值。 我还建议您不要将像Ajax表单提交这样的关键任务操作绑定到transitionEnd或animationEnd事件。 用户交互可以防止触发这些事件。

问：哪种动画在JavaScript中表现更好？ (Q: What kind of animation performs better with JavaScript?)

问：我对此感兴趣。 接受“ CSS代表风格”后，当我第一次看到CSS做我通常会使用JavaScript来做的事情时，这似乎是错误的。 现在我不知道，如果新CSS即是多“对于那些不知道JavaScript”，或者如果有真正的好处可拿？ (Q: I’m interested in the same. Having accepted that “CSS is for style” it seemed wrong when I first saw CSS doing things that I would normally use JavaScript to do. Now I wonder if the newer CSS is more “for those that don’t know JavaScript” or if there are real advantages to be had?)

Tiffany: Here’s where we run into the upper limits of my knowledge. I think it depends on the browser. To my knowledge it’s pretty much a draw. Position, dimension, or margin operations are pretty slow either way.

蒂芙尼：在这里，我们遇到了我所学知识的上限。 我认为这取决于浏览器。 据我所知这几乎是吸引人的。 无论哪种方式，位置，尺寸或边距操作都非常慢。

The disadvantage of JavaScript is that JavaScript animations take place on the same thread as all of your other JS. You’re potentially affecting the performance and responsiveness of your UI.

JavaScript的缺点是JavaScript动画与所有其他JS发生在同一线程上。 您可能会影响UI的性能和响应能力。

By using CSS, you’re freeing up the JavaScript engine. And in some browsers, you’ll get the advantage of GPU processing.

通过使用CSS，您可以释放JavaScript引擎。 在某些浏览器中，您将获得GPU处理的优势。

Now with SVG, you don’t always have a choice. You should use SMIL, but SMIL isn’t supported in IE or Edge, and it’s deprecated in Chrome. So it’s easier to use JavaScript if you want to animate the shape of a path.

现在，使用SVG，您不必总是有选择。 您应该使用SMIL ，但是IE或Edge不支持SMIL ，Chrome中不推荐使用SMIL 。 因此，如果要对路径的形状进行动画处理，则使用JavaScript更容易。

Paul (Guest): I believe the CSS animations are much smoother than JS animations, especially the jQuery animations which are very jumpy. Of course in some cases you may need a bit of JS to trigger the CSS effect when needed.

Paul(来宾)：我相信CSS动画比JS动画要平滑得多，尤其是jQuery动画，它们跳得很快。 当然，在某些情况下，您可能需要一些JS才能在需要时触发CSS效果。

问：您说jQuery动画是跳动的，但是如何使用Velocity.js和CSS动画呢？ velocity.js上的信息说，它在移动设备上的性能比CSS动画好。 ( Q: You said jQuery animations are jumpy but what about using something like velocity.js vs CSS animations? The information on velocity.js says that it performs better on mobile than CSS animations.)

Paul (Guest): Yes I use velocity.js for animated menus on mobile and it is a lot smoother than jQuery. I suppose it depends on what you are doing but sometimes all you need to do in JS is add a class to the element and let the CSS animate it rather than making the JS animate the element also. (Mind you I’m pretty rubbish at JS anyway.)

Paul(Guest)：是的，我在移动设备上使用了Velocity.js制作动画菜单，它比jQuery平滑得多。 我想这取决于您的工作，但是有时在JS中需要做的就是向元素添加一个类，然后让CSS对它进行动画处理，而不是使JS也对元素进行动画处理。 (请记住，无论如何，我对JS还是很垃圾。)

Tiffany: By using CSS for animation and transitions, you’re moving those tasks from the JavaScript thread to the graphics processing thread. When using JavaScript for animation, you run the risk of other JS operations being held up until the animation completes. With CSS, the JavaScript portion of your pages remain available. If you want to detect when an animation/transition is complete, you can do it asynchronously using the transitionEnd or animationEnd events.

Tiffany：通过使用CSS进行动画和过渡，您可以将这些任务从JavaScript线程转移到图形处理线程。 在将JavaScript用于动画时，冒着其他JS操作被搁置直到动画完成的风险。 使用CSS，页面JavaScript部分仍然可用。 如果要检测动画/过渡何时完成，可以使用transitionEnd或animationEnd事件异步进行。

Something else that I appreciate about using CSS animations is that you can combine them with media queries. An object may slide horizontally across a wide screen, but flip over on small ones (or something). And if the user has JavaScript blocked, animations will still work (apart from the event handling, of course).

对于CSS动画，我欣赏的另一点是您可以将它们与媒体查询结合使用。 一个对象可以在宽屏幕上水平滑动，但可以在小屏幕(或其他物体)上翻转。 而且，如果用户阻止了JavaScript，动画仍然可以工作(当然，除了事件处理之外)。

动画提示 (Animation Tips)

问：嗨@webinista！ 我想知道您是否有任何技巧或规则来制作流畅，高效的动画？ 有什么我们应该远离动画的吗？ (Q: Hi @webinista! I was wondering if you have any tips or rules for smooth, performant animations? Is there anything we should stay away from animating?)

Tiffany: Yes! I ran into this issue recently too. Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.

蒂芙尼：是的！ 我最近也遇到了这个问题。 请注意动画属性会改变页面上对象的尺寸或位置(也称为引起重排)。 根据浏览器的不同，这些速度可能特别慢。

1. top

   top

2. left

   left

3. right

   right

4. bottom

   bottom

5. margin-*

   margin-*

Instead use the transform property and the translate(), translateX(), and translateY() functions. @PaulOB answered this question well.

取而代之的是使用transform属性以及translate() ， translateX()和translateY()函数。 @PaulOB很好地回答了这个问题。

I’ve also run into issues with the filter property and the blur() function. Gaussian blurs are kind of expensive to calculate. So I’d say avoid animating/transitioning that for now.

我也遇到了关于filter属性和blur()函数的问题。 高斯模糊的计算成本很高。 因此，我现在要避免对其进行动画处理/转换。

Paul (Guest): Use translate to move things rather than absolute positioning as it is more performant.

Paul(来宾)：使用平移可移动事物，而不是绝对定位，因为它更具性能。

问：您认为非常有用或棘手的关于动画或过渡的最后一个技巧是什么？ 例如我的一个关于animation-delay –如果我希望从页面加载的开始开始多个动画，我会给出负值，这样我就可以保持它们之间的延迟。 谢谢！ (Q: What was the last trick regarding animations or transitions that you considered very useful or tricky? For example mine was one regarding animation-delay – if I want multiple animations to start from the beginning of page load I’ll give negative values so I could keep the delay between them. Thanks!)

Tiffany: Ooh. This is a good one.

蒂芙尼：哦。 这个不错。

While working on the book, I dug into the cubic-bezier function. It’s super interesting to me because it involves a level of math that I love and fear at the same time.

在编写本书时，我研究了cubic-bezier函数。 这对我来说非常有趣，因为它同时涉及到我热爱和恐惧的数学水平。

I wish I could sum up how it works off the top of my head. But the short version is that when the 2nd and 4th values are greater/less than 1, it will create an “overshoot” or “back-up” effect. You can see what I mean here.

我希望我可以总结一下它是如何工作的。 但是简短的说法是，当第二个和第四个值大于/小于1时，将产生“过冲”或“备份”效果。 您可以在这里看到我的意思。

网站动画 (Animation on Sites)

问：现在，我看到很多人都在谈论动画及其可能性，但是除了看起来非常令人印象深刻的测试作品以外，例如克里斯·甘农的《熔岩灯 》。 我不完全确定它们在网页设计词典中的位置。 您如何期望它们将在商业网站上使用(例如)，您是否可以指出任何示例？ (Q: Right now, I see very many people talking about animation and its possibilities, but beyond what appear to be very impressive test pieces, Chris Gannon’s Lava Lamp for example. I’m not entirely sure where they fit in the lexicon of web design. How do you anticipate they will be used on a business website (for example) and do you have any examples you can point at?)

Tiffany: We’re starting to see animations and transitions on business websites. MailChimp has one of my favorite examples. After you schedule an e-mail, there’s an animated SVG of a chimp holding up “metal fingers” encouraging you to “Rock on.” Unfortunately, it’s only visible to logged-in customers.

蒂芙尼：我们开始在商业网站上看到动画和过渡效果。 MailChimp有我最喜欢的例子之一。 安排了电子邮件之后，会有黑猩猩举起“金属手指”的动画SVG，鼓励您“继续前进”。 不幸的是，它仅对已登录的客户可见。

I do think you’ll see animation – and I’m including transitions – used to add that sort of whimsy. You can do clever loading animations and hover effects. Say, revealing an entire object on hover by animating the clip-path property. McDonald’s may animate their arches logo. I think you’ll also see animated charts in combination with SVG.

我确实认为您会看到动画-并且包括过渡效果-用于添加那种奇思妙想。 您可以巧妙地加载动画和悬停效果。 说，通过设置clip-path属性的动画来显示悬停时的整个对象。 麦当劳可以为其拱门徽标制作动画。 我认为您还会看到与SVG结合使用的动画图表。

这是一个包装！ (That’s a wrap!)

How are those for words of wisdom? Tiffany had spent an extra 1.5 hours on the forums with us discussing CSS animations. If you’re only reading this discussion here, then I’d say it’s safe to assume you missed the event. However there’s no need to feel that you missed out, because you can still read the whole discussion and continue to take part. Better yet, start your own forum discussion.

那些智慧的话怎么样？ Tiffany在论坛上花费了额外的1.5个小时，与我们讨论CSS动画。 如果您仅在此处阅读此讨论，那么可以肯定地说您错过了这次活动。 但是，您不必觉得自己错过了，因为您仍然可以阅读整个讨论并继续参加。 更好的是，开始您自己的论坛讨论 。

翻译自: https://www.sitepoint.com/animation-advice-from-a-css-master/

css动画 和 js动画