У меня есть интересная проблема, которую я пытаюсь решить. У меня есть эта кнопка пожертвования, созданная с использованием следующего css.
#donate-button {
width: 211px;
position: absolute;
background: #FFBC2F;
color: #FFF;
left: 1140px;
right:1340px;
z-index: 30;
top: 0px;
transition:width 2s;
transition:left 2s;
transition:bottom 2s;
}
И эффект перехода css, который я хочу для этого, заключается в том, что кнопка donate button orange background расширяется. Он будет расширяться влево, влево влево, а верхний и правый кадры кнопки остаются неповрежденными в углу браузера.
Я попробовал применить следующее свойство перехода css перехода так:
#donate-button:hover {
width:33%;
left:73%;
bottom: 53%;
}
Кнопка donate выполняет изменение размера только в нижнем фрейме, но не в левом фрейме и его ширине. Но я подозреваю, что не знал, как применять сочетание задержки перехода и продолжительности, поэтому я не мог реально получить правильный эффект...
Может ли кто-нибудь указать мне в правильном направлении, как я могу достичь этого типа эффекта/анимации? Есть идеи?
Дайте мне знать, если вам нужна дополнительная информация.
transition:width 2s;
transition:left 2s;
transition:bottom 2s;
Вы переписываете свойство transition
здесь два раза, так что только последнее значение, наконец, "выживает".
Вы должны поместить все три значения, которые хотите оживить, в одно свойство transition
,
transition:width 2s, left 2s, bottom 2s;
О, я нашел ответ.
Я должен делать так.
#donate-button {
height:80px;
width: 211px;
position: absolute;
background: #FFBC2F;
color: #FFF;
left: 1140px;
right:1340px;
z-index: 30;
top: 0px;
transition:height 2s ease-in, width 2s ease-out, left 2s ease-out, bottom 2s ease-in;
}
#donate-button:hover {
height:30%;
width:53%;
left:77%;
bottom: 23%;
}
Я забыл добавить свойство height. Именно поэтому высота была слишком быстро увеличена при наведении курсора, таким образом, анимация не была возможна.