我们看到设计精美的科技巨头网站（如Apple或微软）或特斯拉或梅赛德斯等汽车公司时，我们每个人都会感到震惊。

使这些网站脱颖而出的因素，往往是吸引人的动画和效果，让我们一次又一次地看。

那么，他们如何使网站如此惊人地互动？

有没有想过这些网站上的动画实际上是如何运作的？

您是否希望为您的企业设计一个同样优雅和互动的网站？

如果是的话，那就别再看了。

请继续阅读，因为这是一个广泛的摘录，涵盖了CSS动画和变换的基础知识，可以极大地帮助您实现商业网站的相同功能。

如果您刚刚进入前端开发领域，或者希望扩展您对前端开发的理解，那么请继续阅读此博客，因为在最后，您将全面了解CSS。

CSS或层叠样式表是您会注意到的Web应用程序的相当一部分。

虽然CSS为Web应用程序设置了样式，但HTML或超文本标记语言构成了它。

动画在改善用户体验方面发挥着关键作用，因为它们有助于提供改进的视觉反馈，并有助于与网站进行交互。

CSS 3具有丰富的内置属性，大大有助于动画元素，并且在所有主流浏览器中也是如此。

但是 - 强大的力量，更大的责任。

动画需要明智地使用，否则你最终可能会创建一个比交互式更令人分心的页面。动画的整个目的是作为一种辅助，而不是在使用Web应用程序时的障碍。

根据谷歌的一份报告，几乎50％的网络流量来自移动设备。因此，任何企业都需要创建适合移动设备的动画。

对CSS（最好是CSS 3），HTML和某些jQuery 有基本的了解也很有必要。jQuery是一个Javascript库，可以帮助开发人员使用网站的元素。这方面的技术术语是 - DOM操作。

由于您的目标受众可能会有所不同，因此您可能使用多种网络浏览器（Mozilla Firefox，Google Chrome，Safari，Opera，Internet Explorer），因此需要满足所有这些需求。

CSS动画有三个重要方面：

• Transforms(变换)
• Transitions(转变)
• Keyframes(关键帧)

描述CSS中动画和变换的关键元素的流程图。

A部分：Transforms

变换有助于以各种奇妙的方式改变您的网页元素 - 从移动元素到重新调整大小，从旋转元素到倾斜它。

最好的部分 - 您可以在不改变文档流程的情况下更改任何内容。

变换有四个重要方面：

1. Translate
2. Translate
3. Rotate
4. Skew

让我们深入挖掘一下，好吗？

1.Translate

基于Translate将对象从一个点移动到另一个点基本上。

资料来源：0fps.net

Translate会更改元素的坐标。它用于更改2D平面上组件的外观。

Translate意味着在网页上简单地将元素从一个位置移动到另一个位置。您可以在X轴，Y轴或两者上平移对象。

Moves the element on the X-axis
Syntax: transform: translateX(200px); or transform: translateX(-200px);
Moves the element on the Y-axis
Syntax: transform: translateY(200px); or transform: translateY(-200px);
Using shorthand
Syntax: transform: translate(x-axis, y-axis)
Example: transform: translate(200px, 200px);
Alert!
transform: translate(200px); [will only translate the element along the X-axis]

2.Scale

资料来源：camo.envatousercontent.com

人们可以使用图像的大小以及轴X和Y.缩放会扭曲元素的形状并降低元素的质量。大于1的数字将增加大小，小于1的小数将减小大小。

Scaling along the X-axis - transform: scaleX(3);
Scaling along the Y-axis - transform: scaleY(0.5);
Using the shorthand - for scaling along X and Y axis together -
transform: scale(3 , 0.5); or transform: scale(0.5);

3.Rotate

您可以顺时针或逆时针旋转元素。使用的测量单位是度。正值将顺时针旋转元素，反之亦然。这种旋转也会沿X，Y和Z轴发生。

资料来源：gamedev.stackexchange.com

理解CSS动画中的旋转是最棘手的部分之一，因此很多人无法利用此功能的真正潜力。

沿着X轴

想象一下，棉花糖在篝火上旋转时被烤。您必须将元素可视化以与X轴一起转换为页面，这就是X轴上的旋转效果。我们不会看到3D旋转，我们能够看到的是元素高度的变化。

Syntax: transform: rotateX(45deg);

沿着Y轴

想象一个杆子上的舞者。元素将沿Y轴旋转到页面中。你会注意到的是组件的宽度变化了。

Syntax: transform: rotateY(45deg);

沿Z轴

这是使用旋转时可以使用的最佳方向，因为您可以看到实际旋转的元素。也可以分别用正和负旋转值修改顺时针和逆时针运动。为此，尝试想象箭头进入页面并且元素相对于该箭头旋转。

transform: rotateZ(45deg) – clockwise rotation
transform: rotateZ(-45deg) – counterclockwise rotation

Skew

4.gif

Skew元件意味着倾斜。它具有正值和负值，并且像旋转一样，它也以度来度量。

正X值将元素向左弯曲，反之亦然，对于负X.同样，正Y值向下倾斜元素，反之亦然。默认情况下，如果变换中未指定X或Y，则它将相对于X轴移动元素。

Along X-axis
transform: skewX(45deg) or skew(45deg);
Along Y-axis
transform: skewY(80deg);

5.组合变换

也可以将多个转换应用于单个转换语句中。顺序确实很重要（有时），因为第二个变换将应用于第一个变换，第三个变换将应用于前两个变换的结果。

资料来源：commons.wikimedia.org

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

所有这些变换都将对某些用户事件生效，例如悬停，点击，焦点，活动等。要查看动作中的魔法，您可以在这些事件中添加变换。

.element-to-animate{
display: block
}
.element-to-animate:hover{
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}

B部分：TRANSITIONS

资料来源：mozillademos.org

如果您有机会查看上面的代码，您可能会注意到在状态更改期间悬停时的混蛋; 这恰恰是Transitions的目的。Transitions有助于使动画流畅。

可以借助以下属性控制转换：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition-property

这些是可以使用转换的CSS属性。其范围从使用边距和填充到背景和边框。您可以将转换应用于特定功能或完整列表。可在此处找到此权限范围内所有属性的完整列表。

将transition属性应用于特定的CSS属性

transition-property: background-color;

将转换应用于整个CSS属性列表

transition-property: all;

transition-duration

动画将在其中播放的持续时间。这可以很容易地以秒（s）或毫秒（ms）来测量。建议使用秒，因为它使它们易于阅读 - 即使你办公室的同事也不会被你惹恼！

transition-duration: 0.5s;

transition-timing-function

速度可以通过动画来改变用户体验; 因此建议控制它。您可以通过使用transition-timing-function来实现它。

CSS 3团队非常友好地为我们提供了一些内置的速度值，如ease, ease-in, ease-in-out

如果你希望掌握速度的全部命令 - 使用Bezier曲线。

transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

transition-delay

这有助于在启动动画的触发事件和动画的实际开始之间创建暂停。简单地说，转换延迟 - 延迟动画。它以秒（s）或毫秒（ms）为单位进行测量。

transition-delay: 0.5s;

速记：

transition: (property) (duration) (transition-timing-function) (transition-delay);

两个面向时间的功能的顺序，即持续时间和转换延迟问题 ！

Transforms和Transitions一起使用

7.gif

状态1：NORMAL

.element-to-animate display: block; transition: transform 1s ease 0.2s, background 1s; }

状态2：HOVER

.element-to-animate:hover{ background: black; transform: translateX(200px); }

对于在状态1和状态2之间转换，可以将转换分别应用于所有属性和单个时序，或者如果要在状态2中的所有属性上应用转换，则：

transition: all 1s ease 0.2s;

C部分：KEYFRAMES

资料来源：css-tricks.com

关键帧有助于在特定时间将动画从一个更改为另一个。

可以通过两种方式使用关键帧：

1. 从…到…
2. 百分比方法

1.从…到…

在这种方法中，动画期间只有2个状态 - 开始状态和结束状态。

句法：

@keyframes animation_name {
 from { }
 to { }
}

使元素（例如，Car）动画化以从其初始位置水平移动：

@keyframes drive{
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
 }
}
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

2.百分比方法

我们不能在@keyframes中使用from-to，因为现在有超过1个状态。百分比方法将动画分解为各种中间状态，包括开始和结束状态。起始状态用0％表示，结束状态用100％表示。可以有多少中间状态，但建议在整个过程中保持状态的隔离。

示例：0% — 25% — 50% — 75% — 100%

@keyframes jump{
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}

?动画速记

也可以使用这种简洁的格式来编写动画：

animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);

注意：动画延迟将始终在动画持续时间之后出现。除了它们 - 时间导向的功能和其他属性的顺序无关紧要。

例：

.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
Can be re-written as:
.car{
animation: drive 3s ease-in infinite normal 2s;
}

我们希望在“car”元素上添加两个动画 - 驱动和跳转。我们可以通过使用“链接动画”和单行代码完成此操作。

?什么是链接动画？

使用CSS轻松播放多个动画。逗号分离技术可用于链接动画并运行一个动画。例如，

···

.car{

animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;

}

···

动画属性分类：

• 使用哪种动画？
• animation-name：动画的，由名称@keyframes之后的关键字指示
• 动画结束时该怎么办？
• animation-fill-mode：告诉如何处理动画窗口外部动画的元素。
• 如果您希望重复动画“n”次，请使用，
• animation-iteration-count：重复动画。它可以具有数字值，或者如果您希望动画连续播放，则使用“无限”。
• 如果您想要反转动画的方向
• animation-direction：您不需要一起编写单独的动画来反转动画。你可以应用它来播放当前动画，它的方向。

In From – To Approach:
reverse: to - from
alternate: from-to -> to-from -> from-to
alternate-reverse: to-from -> from-to -> to-from
In Percentage Approach
reverse: 100% - 0%
alternate: 0% - 100% -> 100% - 0% -> 0% - 100%
alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

• 动画定时功能，控制动画开始，行为和结束的速度。有一些内置值，如ease，ease-in，你可以使用cubic-bezier（n，n，n，n）编写自己的值。在这玩吧。
• 延迟CSS动画也可以 使用动画延迟将在事件被触发后几秒/毫秒启动动画。

结论

一开始习惯CSS可能有点复杂。但是一旦你习惯了，你就会发现CSS动画和变换非常奇妙。

谢谢阅读。我们希望这篇文章能帮到你。如果确实如此，请大家竖起大拇指，如果您有任何疑问，请随时放弃您的意见。此外，如果您想要分享您想要分享的CSS变换或动画的令人兴奋的用途，我们很乐意听取您的意见。

翻译自：https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

说起CSS3动画，就必须说说 transform，translate，transition，animation这4个属性，transform主要定义元素的动作，比如旋转、倾斜、位移等，translate是transform里面的属性，用于2D/3D位移。后2个主要对动作进行描述，动画时间、速度曲线、次数等。

下面我用是一些简单的示例，让大家快速的入门上手:

快速开始第一个动画

<style>
.div1{
 width: 100px;
 background: red;
 /** 动画描述：宽度改变动画 用时 1s*/
 transition: width 1s;
}
.div1:hover{
 width: 200px;
 background: blue;
}
</style>

<div class="div1">动画</div>

这里hover事件时改变宽度和背景颜色，用transition来描述动画，由于我们只对width进行了描述，所以背景色，鼠标指上去，会立马变色，并不会有渐变的过程。

这里为什么用transition而不用animation？那就要说说他们直接的区别了。

transition需要触发一个事件， 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

现在明白了吧，因为我们用的hover事件，所以要用transition。

下面请看第二个例子

快速开始第二个动画

<style>
.div1{
 width: 100px;
 background: red;
 /** 动画描述：宽度颜色改变动画 用时 1s infinite（无限次）*/
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 /**开始（可以用百分比表示）*/
 from {
 width: 100px;
 background: red;
 }
 /**结束（可以用百分比表示）*/
 to {
 width: 200px;
 background: blue;
 }
 /** or */
 /**开始*/
 0% {
 width: 100px;
 background: red;
 }
 /**中间可以加多个区间*/
 /**结束*/
 100% {
 width: 200px;
 background: blue;
 }
}
</style>

<div class="div1">动画</div>

这里动画从加载就开始执行，所以用了animation，改变宽度和背景色，用时1s，并且无限次循环执行。@keyframes规则是创建动画。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同浏览器。

快速开始第三个动画

<style>
.div1{
 width: 100px;
 background: red;
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 100% {
 transform: rotate(20deg);
 }
}
</style>

<div class="div1">动画</div>

transform：rotate使其div元素2D旋转20°.当然你可以设置transform：rotateY, Y 轴的 3D 旋转。

你还可以设置transform: translate，进行2D，3D位移；

transform: scale，进行2D，3D缩放；

transform: skew，进行2D倾斜等等。

总结

好的动画效果，第一要素是：好的想法，有创意，才有好的成品；第二要素是：有好的实现解题思路，当有设计后，制作就需要想办法实现效果，剥茧抽丝，一步一步来；第三要素：不畏惧的心，勇敢尝试，多实践，多动手，灵感往往来与你写的过程中。

有了上面的小示例，相信小伙伴们也能自己写写简单的CSS3动画了，如果有疑问，可以评论留言，大家一起学习探讨。