css怎么做向左拉伸动画_CSS核心动画技巧：重力，挤压和拉伸

css怎么做向左拉伸动画

Previously I’ve talked about using ease-in and ease-out to enhance motion design. Those properties might also be called friction and inertia, both products of gravity.

以前，我曾讨论过使用ease-in and ease-out 增强运动设计 。 这些属性也可以称为摩擦和惯性 ，都是重力的产物。

Gravity is also a mood: heavy, intimidating and ponderous or light, engaging and playful. By recreating those kinds of movements using CSS, we can enliven our site interfaces with engaging motion. A simple example is the bouncing ball at the top of this article, the motion of which might be used to notify the user to a vital alert message. The markup is a single <div> element, styled and shaped to resemble a ball:

引力也是一种情绪：沉重，令人生畏，沉闷或轻浮，引人入胜和好玩。 通过使用CSS重新创建这些动作，我们可以通过吸引人的动作来激活我们的站点界面。 一个简单的示例是本文顶部的弹跳球，其弹跳可能用于通知用户重要的警报消息。 标记是单个<div>元素，其样式和形状类似于球：

#redball {
	border-radius: 50%;
	width: 20vw; height: 20vw; 
	background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000); 
	margin: 0 auto;
}

Then the CSS to move the ball, with some values derived by the work of Albie Brown, shown sans vendor prefixes for clarity:

然后使用CSS移动球，其中一些值是由Albie Brown的工作得出的，为清楚起见，显示了没有 供应商前缀的内容：

@keyframes bounce {
	from, to {
		transform: translateY(30vh);
	}
	80% {
		transform: translateY(15vh);
	}
}

I’m using vw and vh units to size the ball and its motion so that both are completely responsive in modern browsers without any need for @media queries.

我正在使用vw和vh单位确定球的大小及其运动，以使两者在现代浏览器中都能完全响应，而无需@media查询 。

To call this animation on the ball:

将此动画称为球：

#redball {
	transform-origin: center bottom;
	animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}

Note the altered value for transform-origin, which makes it easier to position the element (especially if it is rebounding from another object), as well as adding a touch of realism to the next step we will take.

请注意， transform-origin值已更改，这使元素的放置更加容易(特别是当它从另一个对象反弹时)，并为下一步提供了逼真感。

By itself, this animation creates the illusion of gravity, but not its complete effect: a soft object like a rubber ball will compress slightly when it hits the ground, expanding as it recoils. Disney calls this squash and stretch motion “the most important principle of animation”. Artists use it to provide characters and objects with life and realism. It’s not difficult to achieve with CSS, by adding a scale to the CSS transforms that already exist in our animation:

就其本身而言，此动画会产生重力的错觉，但不会产生完全的效果：像橡胶球这样的柔软物体在撞击地面时会略微压缩，而后坐时会膨胀。 迪士尼将这种挤压和拉伸动作称为“动画的最重要原理”。 艺术家使用它为人物和物体提供生活和真实感。 通过在动画中已经存在的CSS转换中添加scale ，使用CSS并不难实现：

@keyframes bounce {
	from, to {
		transform: translateY(30vh) scaleY(.98);
	}
	80% {
		transform: translateY(15vh) scaleY(1.02);
	}
}

The degree to which squash and stretch is used depends partly on the object, and partly on the style of animation: some kinds of anime will take this to an extreme degree, for example.

使用挤压和拉伸的程度部分取决于对象，部分取决于动画的样式：例如，某些类型的动漫会将其达到极限。

Of course, there’s one other unrealistic aspect of this animation: the fact that it goes on forever. In the next article in this series, I’ll explore adding natural decay to your CSS motion designs.

当然，此动画还有另一个不切实际的方面：它会永远持续下去。 在本系列的下一篇文章中，我将探索将自然衰减添加到CSS运动设计中。

Want to apply more aspects of natural motion to your web animation? I’d recommend the following:

是否想将自然运动的更多方面应用于您的网络动画？ 我建议以下内容：

Seasonal CSS

: a CSS 3D experiment with gravity, drift, and realistic shadows.

季节性CSS ：具有重力，漂移和逼真的阴影CSS 3D实验。

Hypnotic logo animation

: nested animations, arcs, and pendulum motion.

催眠徽标动画 ：嵌套动画，弧线和摆运动。

翻译自: https://thenewcode.com/966/CSS-Core-Animation-Skills-Gravity-Squash-and-Stretch

css怎么做向左拉伸动画