Question

我有以下css规则：

button:hover:after {
    content: ' ' attr(title);
}

基本上该按钮具有作为内容和标题属性的fontawesome图标。当您将鼠标悬停在按钮上时，它会添加一个空格，然后将标题添加到按钮的内容中。见this JSFiddle

现在问题是，我将如何制作动画？我希望按钮的新宽度能够被动画化，因此它不会显得那么静态和丑陋。

Answer 1

我有一个解决方案，但有效但可能不是最好的时尚

button:after {
    content:' ' attr(title);
    visibility: hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
    font-size: 0;
}
button:hover:after {
    content:' ' attr(title);
    visibility: visible;
    opacity:1;
    transition-delay:0s;
    font-size: 13px;
}

See working JSFiddle here

<强>背景

您的方法与使用display属性类似。因此，使用我的小hack将信用转到此Transitions on the display: property，以便在初始:after状态下将字体大小减小为0

<强>更新

更顺畅的过渡：

button:after {
    content: ' ' attr(title);
    font-size: 0;
    opacity: 0;
    transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}

button:hover:after {
    font-size: inherit;
    opacity: 1;
    transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}

请参阅JSFiddle

动画：悬停：之后

1 个答案: