A Beginner’s Introduction to CSS Animation中文版

现在越来越多的网站正在使用动画，无论是以GIF，SVG，WebGL，背景视频等形式。 当正确使用时，网络上的动画带来生机和交互性，为用户增添了额外的反馈和体验。

在本教程中，我将向您介绍CSS动画; 高性能的做事方式越来越受到browser support的欢迎。 下面的示例涵盖了基础知识：一个方形元素变化为圆形。

实现效果为https://codepen.io/mengmengpr...

高级选项

Envato市场上的设计师们一直在忙于创作一系列的CSS动画，从阴影到色带，滑块等。你可以将它们插入到你的网站中。
您还可以聘请Envato Studio的CSS专家，以帮助您为您的项目提供更丰富的定制。

@keyframes 和 Animation

CSS动画的主要组件是@keyframes，即创建动画的CSS规则。将@keyframes视为时间轴上的阶段。 在@keyframes中，您可以定义这些阶段，每个阶段都有不同的样式声明。

接下来，要使CSS动画工作，您需要将@keyframes绑定到一个选择器。这将逐步解析@keyframes声明中的所有代码，并根据阶段将初始样式更改为新样式。

@keyframes

接下来我们将设置动画阶段。@keyframes的属性有：

• 我们选择的名称（这里为tutsFade）。

• 阶段：0%-100%或者from(0%)-to(100%)。

• css样式：我们即将应用到每个阶段的样式。

示例：

@keyframes tutsFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*---- 或者 ----*/
@keyframes tutsFade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/*---- 简写 ----*/
@keyframes tutsFade {
    to {
        opacity: 0;
    }
}

上面的代码将实现一个元素不透明度的过度，从opacity: 1到opacity: 0。上述每个方法都将获得相同的结果。

@Animation

动画属性用于在CSS选择器中调用@keyframes。
Animation可以有很多属性：

• animation-name：@keyframes的名字（这里是tutsFade)。

• animation-duration：动画持续时长。

• animation-timing-function：设置动画的速度（linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)。

• animation-delay：动画开始前的延迟。

• animation-iteration-count：动画循环的次数。

• animation-direction：定义是否应该轮流反向播放动画。如果animation-direction值是"alternate"，则动画会在奇数次数正常播放，而在偶数次数反向播放。

• animation-fill-mode：指定当我们的动画完成时将哪些样式应用于元素。

示例：

.element {
    animation-name: tutsFade;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}
/*---- 简写 ----*/
.element {
    animation: tutsFade 4s 1s infinite linear alternate;
}

添加不同浏览器支持的前缀

我们需要使用浏览器特定的前缀来确保最佳的浏览器支持。 标准的前缀都有：

• Chrome & Safari：-webkit-

• Firefox：-moz-

• Opera：-o-

• IE：-ms-

上面的例子将变为：

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

为了本教程的可读性，接下来将不使用前缀，但最终版本会包含它们，我也鼓励您能在您的CSS代码中使用前缀。

要了解更多有关浏览器前缀的信息，可以查看http://css3please.com/。

多个动画

您可以使用逗号分隔符添加多个动画。假设我们要添加一个旋转到元素，需要声明额外的@keyframes，然后绑定到我们的元素：

.element {
    animation: tutsFade 4s 1s infinite linear alternate,
    tutsRotate 4s 1s infinite linear alternate;
}

@keyframes tutsFade {
    to {
        opacity: 0;
    }
}
@keyframes tutsRotate {
    to {
        transform: rotate(180deg);
    }
}

正方形到圆形的变换

接下来将创建一个简单的形状转换;使用上述原则来将一个正方形逐步变换为圆形。我们共有五个阶段，在每个阶段，都会定义元素的边框半径，旋转和不同的背景颜色。

基本元素

首先，我们创建一个html元素来进行动画。

<div></div>

接着，给div添加默认的样式：

div {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: coral;
}

定义Keyframes

现在，我们来创建一个有五个阶段的@keyframes：

@keyframes square-to-circle {
    0%{
        border-radius: 0 0 0 0;
        background: coral;
        transform: rotate(0deg);
    }
    25%{
        border-radius: 50% 0 0 0;
        background: darksalmon;
        transform: rotate(45deg);
    }
    50%{
        border-radius: 50% 50% 0 0;
        background: indianred;
        transform: rotate(90deg);
    }
    75%{
        border-radius: 50% 50% 50% 0;
        background: lightcoral;
        transform: rotate(135deg);
    }
    100%{
        border-radius: 50%;
        background: darksalmon;
        transform: rotate(180deg);
    }
}

应用动画

定义完我们的square-to-circle动画，我们还需要将动画应用到div上:

div {
    width: 200px;
    height: 200px;
    background-color: coral;
    animation: square-to-circle 2s 1s infinite alternate;
}

现在动画的状态是：

• 动画名称为square-to-circle。

• 动画时长为2s。

• 动画延迟为1s。

• 动画循环次数为infinite，因此会无限循环。

• 动画循环方向为alternate，它将从开始到结束，然后反向执行，然后再从开始到结束，一直循环。

使用animation-timing-function

我们可以添加到动画属性的最后一个值是动画定时功能。这将定义我们运动的速度，加速度和减速度。这个属性可以是一个非常详细的值（需要笨拙的手动计算），但是有很多免费的网站提供资源和动态定时功能的实时定制。

一个相关的工具是CSS Easing Animation Tool，可以用来计算animation-timing-funtion。

通过在工具里的计算，使用animation-cubic-bezier，给我们的动画添加一个弹性特效。最终代码如下：

div {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: coral;
    animation: square-to-circle 2s 1s infinite cubic-bezier(1, .015, .295, 1.225) alternate;
}

最后一步

在现代浏览器中，我们的动画都能完美运行，但是Firefox在动画渲染方面较差，旋转过程中边缘会出现锯齿。我们可以通过添加outline样式完善：

outline: 1px solid transparent;

最近发现很多国外的优质文章，翻译是自己学习的过程也是分享的过程。喜欢的话，点个赞吧。