CSS 向右过渡幻灯片

Question

我需要向这段代码添加一个 CSS 过渡，让按钮的宽度在悬停时平滑变化，但我无法让它工作。

http://jsfiddle.net/AlexeyKosov/fa9c6nfc/1/

HTML:

<button class="btn btn-default">
    <span class="fa fa-check"></span>
    <span class="caption">Button text</span>
</button>

CSS:

.btn .caption {
    display: none;
}
.btn:hover .caption {
    display: inline;
}

Answer 1

您应该为此使用 max-width。

.btn .caption {
    max-width: 0px;
    display: inline-block;
    overflow: hidden;
    transition: all 2s linear;
}
.btn:hover .caption {
    max-width: 999px;
}

http://jsfiddle.net/fa9c6nfc/2/

CSS 向右过渡幻灯片

CSS transition slide right

css

css-transitions