css 过渡动画入门

CSS 过渡动画允许您在指定的时间内平滑地更改 CSS 属性值。
要创建过渡动画,您需要指定要动画化的 CSS 属性,动画持续时间以及你要使用的任何缓动或定时函数。
你还可以指定动画开始前的延迟。

以下是更改元素背景颜色的简单过渡的示例:

button {
 background-color: lightblue;
 transition: background-color 0.5s ease-in-out;
}
button:hover {
 background-color: lightgreen;
}

在此示例中,当鼠标悬停在按钮元素上时,背景颜色将以 0.5 秒的时间,使用 ease-in-out 缓动函数从 lightblue 平滑变换为 lightgreen。

你可以动画化许多其他 CSS 属性,包括宽度、高度、不透明度、变换等。
你也可以使用 transition-timing-function 属性控制动画的方向。

对于更复杂的动画,你可以使用 CSS 关键帧定义动画,并使用 JavaScript 控制动画。

作者:成浩东原文地址:https://segmentfault.com/a/1190000043392958

%s 个评论

要回复文章请先登录注册