当我们看到设计精美的科技巨头网站（如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