css中的动画显示属性

Question

我没有例子就无法解释我的问题。所以，这是一个例子：

HTML：

<p>H<span>yper </span>T<span>ext </span>M<span>arkup </span>L<span>anguage</span></p>

CSS：

p {
    text-align: center;
    font-family: 'Asap', sans-serif;
    font-size: 72px;
}

span {
    display: none;
}

p:hover span{
    display: inline;
}

输出：

我们会在屏幕上看到HTML。

当我将鼠标指针悬停在文本上时，它将显示全文：

Hyper Text Markup Language

我想要的是什么：

我希望当前行为相同，但我想使用动画，以便这个东西慢慢显示

我尝试了什么

我试图动画display属性，但它不可动画。

所以，我反过来尝试了。

我尝试使用visibility: Hidden;和opacity: 0;。但在这两种情况下，隐藏元素占据了空间。所以，输出将是这样的：

H     T    M      L

JS Fiddle

https://jsfiddle.net/Vishal1419/twzok58d/

Answer 1

没有脚本的方法是使用max-width，其中一个将其设置为足够大的值以容纳最长的文本

为了正确进行此包装，我还添加了第二个span和一个伪元素。

Fiddle demo

Stack snippet

＆＃13;

＆＃13;

p {
  text-align: center;
  font-size: 72px;
}
p > span {
  display: inline-block;
}
p span span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  transition: max-width 1s;
  vertical-align: bottom;
}
p span span::after {
  content: '\00a0'
}
p:hover span span {
  max-width: 300px;
}

＆＃13;

<p><span>H<span>yper</span></span><span>T<span>ext</span></span><span>M<span>arkup</span></span><span>L<span>anguage</span></span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用CSS3无法实现此功能，动画仅适用于数字属性，如大小，位置或颜色。

但是你可以使用jQuery fadeIn和fadeOut函数来制作你想要的东西。

Answer 3

不确定您是否可以使用CSS3实现这一点并且转换不会为display属性设置动画。尝试使用jQuery。

你可以：

$('p').hover(function () {
  $('span').fadeIn();
}, function () {
    $('span').fadeOut();
});