动画CSS下划线延迟 [英] Animated CSS underline on delay

问题描述

我尝试在页面加载时产生一个带有转换延迟的下划线（从左到右）。我知道如何让它工作在悬停，但不是在负载。尝试这样的东西，但不知道为什么它不工作。

  .under {
 position：relative; 
 text-decoration：none; 
 display：inline-block; 
} 
 .under :: after {
 content：; 
 position：absolute; 
 width：100％; 
 height：2px; 
 bottom：0; 
 left：0; 
 background-color：＃000; 
 -webkit-transition-delay：2s; 
 transition-delay：2s; 
 -webkit-transition：all 0.3s ease-in-out 0s; 
 transition：all 0.3s ease-in-out 0s; 
} 
  

解决方案

注意到尝试达到您要查找的效果：

• text-decoration >仅当有状态更改时触发 （由于用户交互（如悬停，点击等）或由于像setTimeout这样的JavaScript）。如果你需要在页面加载时发生动画，那么你应该使用CSS animation 和 @keyframes 规则。 >
  

注意，在你的代码中， transition-delay code> transition 属性，而short-hand属性的延迟值为 0s 。因为这在CSS后面出现，它将覆盖之前指定的 transition-delay：2s 。

---

如何实现这个效果？

这是一个相当简单的效果，你试图实现，所以SVG不是真的需要。

使用伪元素：

如果下划线是弧形的，

在下面的代码片段中，我使用了一个伪元素并将其定位，使得它产生一条看起来像文本下划线的线。通过将伪元素的 width 从0 - 100％进行动画，可以实现所需的效果。伪元素的 height 决定边框的粗细， background-color 决定边框的颜色。 / p>

  .underline {display：inline-block;位置：相对; padding-bottom：4px; margin-bottom：10px;}。underline：after {position：absolute; content：''; bottom：-2px; left：0px; height：2px; width：0％; background-color：red;动画：下划线2s ease-in-out 2s无限; / * remove infinite如果你只想要一次* /} @ keyframes underline {to {width：100％; }}  

 < div class ='underline'一些带下划线的文字< / div>< br>< div class ='underline'>一些冗长的下划线文字< / div>   
 
 
 
 
 
 
 使用线性渐变：
 
 
 
使用 linear-gradient 图像作为元素的背景也可以实现相同的效果。这里，X轴中的 background-size 是从0％-100％的动画。  background-size 在Y轴确定边框的粗细， linear-gradient 确定边框的颜色。 p> 
 
 
 
 
 
  .underline {display：inline-block;位置：相对; padding-bottom：4px; margin-bottom：10px;背景：线性梯度（右，红，红）; background-size：0％2px;背景重复：无重复; background-position：left bottom;动画：下划线2s ease-in-out 2s无限; / * remove infinite如果你只想要一次* /} @ keyframes underline {to {background-size：100％2px; }}  
 
 < div class ='underline'一些加下划线的文字< / div>< br>< div class ='underline'>一些冗长的下划线文字< / div>   
 
I'm trying to animate (left to right) an underline with a transition delay on page load. I know how to get it working on hover, but not on load. Trying something like this but not sure why it won't work. 
.under {
    position: relative;
    text-decoration: none;
    display: inline-block;
}
.under::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    -webkit-transition-delay: 2s; 
    transition-delay: 2s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

解决方案
There are two things to be noted while trying to achieve the effect that you are looking for:


text-decoration property cannot be animated such that the underline goes from left to right.
CSS transition is something that gets triggered only when there is a state change (either due to user interaction like hover, click etc or due to JavaScript like setTimeout). If you need the animation to happen on page load then you should use CSS animation with @keyframes rule.


As a side note, in your code the transition-delay is added before the transition property and the short-hand property has a delay value of 0s. Since this is present later in the CSS, it will override the transition-delay: 2s that was specified earlier.



How to achieve this effect?

This is a rather simple effect that you are trying to achieve and so SVG is not really required. I would have recommended using SVG if the underline was curved (or) like an arc.

Using a Pseudo-element:

In the below snippet, I have used a pseudo-element and positioned it such that it produces a line that looks like an underline to the text. By animating pseudo-element's width from 0 - 100%, the required effect can be achieved. The height of the pseudo-element determines the border thickness and the background-color determines the color of the border.



.underline {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.underline:after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: 0px;
  height: 2px;
  width: 0%;
  background-color: red;
  animation: underline 2s ease-in-out 2s infinite; /* remove infinite if you want only once */
}
@keyframes underline {
  to {
    width: 100%;
  }
}

<div class='underline'>Some underlined text</div>
<br>
<div class='underline'>Some lengthy underlined text</div>







Using Linear Gradients:

The same could also be achieved by using linear-gradient images as background to the element. Here the background-size in X-axis is animated from 0% - 100%. The background-size in Y-axis determines the border thickness and the linear-gradient determines the border color.



.underline {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 10px;
  background: linear-gradient(to right, red, red);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  animation: underline 2s ease-in-out 2s infinite; /* remove infinite if you want only once */
}
@keyframes underline {
  to {
    background-size: 100% 2px;
  }
}

<div class='underline'>Some underlined text</div>
<br>
<div class='underline'>Some lengthy underlined text</div>





                        
这篇关于动画CSS下划线延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！