@ Алекс, покажи мне, может быть, ты что-то забудешь ... Ширина должна доходить до 100% в анимации
я есть тег, который отображается в виде блока. При загрузке страницы ее ширина увеличивается на cssанимация от нуля до некоторого процента содержащегося элемента div (скрипта содержит MWE, но в этом элементе содержится более одной ссылки, каждая с разной шириной). При наведении курсора я хочу изменить цвет, цвет фона, а также расширить его до 100%, используя CSSпереход, Цвет и цвет фона немного работают, но, похоже, игнорируют переход ширины.
Snippet:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-fill-mode: forwards;
transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
border: 2px solid #5e0734;
overflow: hidden;
white-space: nowrap;
margin-right: 0;
margin-left: 5px;
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}
.home-bar:hover {
background-color: #5e0734;
color: white;
width: 100%;/*WIDTH IGNORED*/
text-decoration: none;
}
#bar0 {
-webkit-animation-name: grow0;
animation-name: grow0;
}
@keyframes grow0 {
from {
width: 0%;
}
to {
width: 75%;
}
}
<a href="#" id="bar0" class="home-bar">LINK</a>
Примечание. Я протестировал его с изменением высоты ссылки при наведении, и это сработало. Только ширина не работает. Возможно, это как-то связано с анимацией при загрузке страницы.