CSS过渡教程

CSS过渡可以通过最小的代码来实现平滑属性的变化，非常适合悬停效果和交互式反馈。 1。使用语法过渡：属性持续时间正时函数延迟；定义过渡，例如过渡：背景色0.3s易于0.1 s;。 2。为CSS属性指定过渡性属性，以动画，更喜欢背景色，不透明度或通过不可互化的属性（如Display）进行转换。 3。设置过渡到控制动画长度，例如0.3s，这是运行过渡所必需的。 4。应用过渡功能，例如轻松，线性或立方bezier（）来定义起搏。 5。使用过渡 - 延迟延迟起点，例如0.1s。 6。列出带有逗号的多个转变以进行复杂效果。 7。优先考虑转换和不透明度的GPU加速度和更好的性能。 8。将持续时间保持在200-500ms之间，以敏感。 9。避免过渡：全0.3s；为了防止意外动画。 10。请勿在大元素上使用诸如宽度或高度之类的布局属性，以避免jank。 11。用不透明度和指针事件替换显示为平滑显示/隐藏效果的切换，如.fade {opacity：0;过渡：不透明度0.3s易于;指针盛会：无； }和.fade.Active {不透明度：1;指针盛会：自动； }。 12.使用速记进行简洁或长时间的清晰度。 13.确保CSS属性实际更改状态（例如，通过：悬停或类更改）以触发过渡。正确应用后，CSS过渡会创建快速，微妙和性能的交互，从而在没有JavaScript的情况下增强用户体验。

CSS过渡是控制CSS属性时控制动画速度的一种简单方法 - 非常适合悬停效果，按钮状态或布局更改。您不需要JavaScript或复杂的密钥帧。只需几行CSS，您就会获得光滑的视觉反馈。

这是有效使用它们的方法。

什么是CSS过渡？

CSS的transition使您可以定义属性从一个值转移到另一个值时的时间应随着时间的变化，例如用户徘徊在按钮上时。从传统意义上讲，这不是动画，而是两个州之间平稳的插值。

基本语法：

过渡：属性持续时间正时功能延迟；

例子：

按钮 {
  背景色：蓝色；
  过渡：背景色0.3s易于0.1 s;
}

按钮：悬停{
  背景色：红色；
}

这使得背景颜色从蓝色变为红色，超过0.3秒，延迟了0.1s，并且“易于”的时序曲线。

关键过渡属性

您不必每次设置所有值 - 大多数都可以省略，并且会返回默认值。

• transition-property
  该属性是为了动画的。常见的： background-color ， opacity ， transform ， width ， color 。
  使用all来动画任何更改的属性（不建议进行性能）。

• transition-duration
  动画需要多长时间（例如0.5s或500ms ）。必须指定，否则过渡将无法运行。

• transition-timing-function
  控制起搏。选项包括：

  • ease （默认，开始缓慢，结束慢）
  • linear （恒定速度）
  • ease-in ， ease-out ， ease-in-out
  • cubic-bezier(x1, y1, x2, y2) - 自定义曲线

• transition-delay
  等待多长时间才开始（例如0.2s ）。

您还可以设置多个过渡：

按钮 {
  过渡： 
    背景色0.3s易于
    变换0.2S线性，
    不透明度0.4S易于入口；
}

最佳实践和技巧

并非所有属性都可以过渡 - 只有具有可插值值（数字，颜色，长度）的属性。例如，您无法平稳过渡display: none block ，但是您可以opacity和visibility褪色。

✅做到这一点：

• 使用transform和opacity以获得最佳性能（GPU加速）。
• 保持持续时间短（200-500ms），以响应响应。
• 将过渡添加到交互式元素（按钮，链接）以进行反馈。

❌避免：

• transition: all 0.3s; - 它可以动画意外属性。
• 在大元素上（可能导致jank）上的布局属性（例如width ， height或margin 。
• 使用display的过渡或z-index - 它们不会插入。

平滑按钮悬停的示例：

 .btn {
  填充：10px 20px;
  背景：＃007BFF;
  颜色：白色；
  边界：无；
  边界拉迪乌斯：4PX；
  过渡：所有0.3 s selie;
  光标：指针；
}

.btn：悬停{
  背景：＃0056B3;
  变换：translatey（-2px）;
  盒子阴影：0 4PX 8PX RGBA（0,0,0,0.2）;
}

速记与朗德

为简单起见，请使用速记：

过渡：背景色0.3s易于;

或为了清楚起见：

过渡范围：背景色；
过渡效果：0.3s;
过渡时期功能：轻松；
transition-delay：0s;

速记更普遍和简洁。

当过渡不起作用时 - 常见修复

• 忘记duration ？如果未设置时间，则不会运行过渡。
• 属性不更改？过渡仅在值更改时触发（例如，悬停，类切换）。
• 使用display还是visibility ？这些不会顺利进行动画 - 而是使用opacity pointer-events 。

显示/隐藏的示例：

 .fade {
  不透明度：0;
  过渡：不透明度0.3s易于;
  指针盛会：无；
}

.fade.Active {
  不透明度：1;
  指针盛会：自动；
}

基本上，CSS过渡是您进行微妙的表现互动的首选。使他们集中精力，快速和关注重要的属性。一旦掌握了它，您就可以到处添加它们 - 按钮，菜单，图标，卡片。它们使静态站点感到活跃。

以上是CSS过渡教程的详细内容。更多信息请关注PHP中文网其他相关文章！