时间戳

首页 > 解决方案 > 加载时从 0 到 100% 的动画宽度

css - 加载时从 0 到 100% 的动画宽度

问题描述

我想为打开网站后看起来像加载的线条制作动画，并且只需要执行一次。

它只需要在 3 秒内从宽度 0% 增长到 100%。

我已经扩展了顺风配置以包括宽度并具有 3 秒的持续时间：

transitionProperty: {
  width: 'width'
},
transitionDuration: {
  3000: '3s'
}

然后应用以下类transition-width duration-3000 ease-linear

问题是，如果我调整窗口大小，我会看到动画，但是当页面加载时它本身并没有动画，它不会增长。

用简单的 CSS 术语来说，我所拥有的是：

transition-property: width;
transition-duration: 3s;
transition-timing-function: linear;

标签： csstailwind-css

解决方案

推荐阅读