AtoZ CSS快速提示：关键帧动画

今天药忘吃喽~ 2022-12-03 09:56 194阅读 0赞

This article is a part of our AtoZ CSS Series. You can find other entries to the series [here][]. View the full screencast and transcript on Keyframe Animations [here][here 1].

本文是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。 在[此处][here 1]查看有关“关键帧动画”的完整屏幕录像和笔录。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about keyframe animations for you.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时视频广播还不够，在本文中，我为您添加了有关关键帧动画的新快速提示/课程。

![k1b-01][]

## K是`@keyframes` **(**K is for `@keyframes`**)** ##

In this week’s tip, we look at ways to handle vendor prefixes and a quick tip for refactoring your `@keyframes` into a more condensed format.

在本周的技巧中，我们将介绍处理供应商前缀的方法，以及将您的`@keyframes`重构为更`@keyframes`格式的快速技巧。

We talked a lot about `@keyframes` in the [video][here 1] about the letter K. Here are some extra tips that you might find useful when working with CSS animations (and any current or future experimental properties).

我们在[视频中][here 1]谈论了很多有关字母K的`@keyframes` 。这里有一些额外的技巧，这些技巧在使用CSS动画(以及任何当前或将来的实验属性)时可能会有用。

### 秘诀1 **(**Tip 1**)** ###

When setting up your keyframes for an animation, it’s quite common for certain points of the animation to share the same values for particular properties. Instead of having a long list of keyframes, you can combine them into a comma separated list, just like you would with selectors that share the same properties and values.

为动画设置关键帧时，动画的某些点为特定属性共享相同的值是很常见的。 您可以将它们组合成一个逗号分隔的列表，而不是使用一长串的关键帧，就像使用共享相同属性和值的选择器一样。

@keyframes pulse {
      0%, 50% {font-size: 10px;}
      25%, 100% {font-size: 20px;}
    }
    
    /* just like */
    h1, h2, h3 {
      font-family: 'Avenir', sans-serif;
    }

### 秘诀2 **(**Tip 2**)** ###

Support for CSS animations is very good — at the time of writing the [global support is 89.5%][global support is 89.5] and all supporting browsers have both `@keyframes` and `animation` unprefixed.

对CSS动画的支持非常好—在撰写本文时， [全球支持率为89.5％，][global support is 89.5]并且所有支持的浏览器`@keyframes`和`animation` 。

However, to ensure backwards compatibility with Safari 8 and iOS 8.4 and below, you’ll need `-webkit` vendor prefixes to ensure your animations actually play. Adding these manually can make your code bloated and hard to maintain as every tiny change will need to be replicated in multiple places. This can be prone to human error which is never a good thing.

但是，为了确保与Safari 8和iOS 8.4及更低版本的向后兼容性，您需要使用`-webkit`供应商前缀以确保动画能够真正播放。 手动添加这些内容可能会使您的代码and肿且难以维护，因为每个微小的更改都需要在多个位置进行复制。 这很容易发生人为错误，这从来都不是一件好事。

There are two ways that you can keep your code nice and clean, and also avoid the manual task of duplication.

有两种方法可以使代码保持美观和干净，也可以避免手动执行重复任务。

You could use the [\-prefix-free JavaScript library][-prefix-free JavaScript library] by [Lea Verou][]. This takes care of all the prefixing for you, so you just write the unprefixed code, and the script runs in the browser and injects all the necessary prefixes for you based on support for features in the browser currently being used.

您可以使用[Lea Verou提供的-prefix][Lea Verou] [\-free JavaScript库][-prefix-free JavaScript library] 。 这将为您处理所有前缀，因此您只需编写无前缀的代码，脚本便会在浏览器中运行，并基于对当前使用的浏览器功能的支持为您注入所有必要的前缀。

Another option is to use [Autoprefixer][]. This is a CSS post-processer that you run after you’ve finished writing your unprefixed code – usually as part of an automated task runner like [Grunt][] or [Gulp][]. Autoprefixer uses info from [Caniuse][] to determine what prefixes are required.

另一种选择是使用[Autoprefixer][] 。 这是一个CSS后处理程序，您可以在编写完无前缀的代码之后运行-通常作为自动任务运行程序(例如[Grunt][]或[Gulp)的一部分][Gulp] 。 Autoprefixer使用[Caniuse][]提供的信息来确定需要哪些前缀。

I personally use Autoprefixer with a Gulp task and haven’t written a vendor prefix for months. It’s a great tip to speed up your workflow and works for all CSS properties, not just `@keyframes`!

我个人使用带有Gulp任务的Autoprefixer，而且已经几个月没有写供应商前缀了。 这是加快您的工作流程并适用于所有CSS属性(不仅仅是`@keyframes`的一个很好的技巧。

> 翻译自: [https://www.sitepoint.com/atoz-css-quick-tip-keyframe/][https_www.sitepoint.com_atoz-css-quick-tip-keyframe]

[here]: https://www.sitepoint.com/tag/atoz-css/
[here 1]: https://www.sitepoint.com/atoz-css-screencast-keyframe
[k1b-01]: /images/20221123/748d8e1b11e845998c8c92e820577621.png
[global support is 89.5]: http://www.caniuse.com/animation
[-prefix-free JavaScript library]: http://leaverou.github.io/prefixfree/
[Lea Verou]: http://www.twitter.com/leaverou
[Autoprefixer]: https://github.com/postcss/autoprefixer
[Grunt]: http://www.gruntjs.com
[Gulp]: http://www.gulpjs.com
[Caniuse]: http://caniuse.com
[https_www.sitepoint.com_atoz-css-quick-tip-keyframe]: https://www.sitepoint.com/atoz-css-quick-tip-keyframe/