css : ::_CSS Motion设计基础：轻松

css : ::

Some useful rules for applying CSS easing to motion design for UI elements and animations, courtesy of Rachel Smith:

Rachel Smith提供的一些将CSS缓动应用于UI元素和动画的运动设计的有用规则：

登上舞台 (Motion Onto The Stage)

As a general rule, when moving something into the viewport, use ease out:

通常，将某些东西移入视口时，请使用easy out ：

Play 玩

div.inwards {
	left: 80%;
	transition: 1s left cubic-bezier(0.21, 0.61, 0.35, 1); 
}

Graph this transition 绘制此过渡图

You could also use the built-in ease-out keyword, but that is simply a predetermined, default value for the cubic-bezier function shown above; it’s much better to build the element’s own unique easing style.

您也可以使用内置的ease-out关键字，但这只是上面显示的三次贝塞尔曲线功能的预定默认值。 最好构建元素自己的独特缓动样式。

If wish to visualize this, or design your own easing variations, I've left links for each function graphed in Lea Verou’s wonderful interactive cubic-bezier tool.

如果希望将其可视化，或者设计自己的缓动变量，那么我已经为Lea Verou出色的交互式三次贝塞尔曲线工具中绘制的每个函数留下了链接。

舞台下运动 (Motion Off The Stage)

When moving something out of the viewport, use ease in:

当移动出来的东西视口，使用放心的 ：

Play 玩

div.outwards {
	left: -20%;
	transition: 1s left cubic-bezier(0.55, 0.05, 0.67, 0.19); 
}

Graph this transition 绘制此过渡图

Note that these terms are opposite to the motion: element outwards → ease-in, element inwards → ease-out.

请注意，这些术语与运动相反 ：元素向外→缓入，元素向内→缓出。

跨舞台运动 (Motion Across The Stage)

If you’re moving something across the viewport, use ease-in-out:

如果您选择了在视口中移动的东西，使用易于进出 ：

Play 玩

div.across {
	left: 75%;
	transition: 1s left cubic-bezier(0.645, 0.045, 0.355, 1); 
}

Graph this transition 绘制此过渡图

Adherence to simple, fundamental rules of motion recreates the laws of physics we experience every day, including friction and inertia, resulting in motion design in your site or app that feels “natural” and real.

遵循简单，基本的运动规则，可以重现我们每天经历的物理定律，包括摩擦和惯性，从而使您的网站或应用中的运动设计感觉“自然”和真实。

In the next article, I’ll look at transitions between CSS animations in motion design.

在下一篇文章中，我将研究动作设计中CSS动画 之间的过渡。

翻译自: https://thenewcode.com/930/CSS-Motion-Design-Basics-Easing

css : ::