Анимация: hover: after

У меня есть следующее правило css:

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

В основном кнопка имеет значок шрифта как контент и атрибут title. Когда вы наводите курсор на кнопку, она добавит пробел, а затем заголовок к содержимому кнопки. См. этот JSFiddle

Теперь вопрос, как мне это оживить? Я хочу, чтобы новая ширина кнопки была анимирована, поэтому она не выглядит такой статической и уродливой.

Ответы

Ответ 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;
}

См. здесь рабочий JSFiddle

Фон

Ваш подход является аналогом использования свойства отображения. Поэтому кредиты идут на этот Переходы на экране: свойство с моим маленьким взломом, чтобы уменьшить размер шрифта до 0 в исходном состоянии :after

Обновление

Даже более плавный переход:

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

Ответ 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/