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;

最近发现不少国外的优质文章，翻译是本身学习的过程也是分享的过程。喜欢的话，点个赞吧。