动画：悬停：之后

Question

我有以下 css 规则：

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

基本上这个按钮有一个字体图标作为内容和一个标题属性。当您将鼠标悬停在按钮上时，它会添加一个 space，然后是按钮内容的标题。参见 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

背景

您的方法类似于使用显示器属性。因此，在初始 :after 状态

中，我的小技巧将归功于此 Transitions on the display: property 以将字体大小减小到 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

Answer 2

它可以像这样工作，但对于此解决方案，您必须为按钮设置固定宽度。

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

button:hover{
    width:70px;
}

button{
    width:20px;
    overflow:hidden;
    white-space:nowrap;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
}

http://jsfiddle.net/j3zw1thh/1/

动画：悬停：之后

Animate :hover:after

html

css

pseudo-element

css-transitions

css-animations