CSS-поле ширины перехода для расширения влево при наведении на него курсора мыши

0

Изображение 174551

У меня есть интересная проблема, которую я пытаюсь решить. У меня есть эта кнопка пожертвования, созданная с использованием следующего 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 выполняет изменение размера только в нижнем фрейме, но не в левом фрейме и его ширине. Но я подозреваю, что не знал, как применять сочетание задержки перехода и продолжительности, поэтому я не мог реально получить правильный эффект...

Может ли кто-нибудь указать мне в правильном направлении, как я могу достичь этого типа эффекта/анимации? Есть идеи?

Дайте мне знать, если вам нужна дополнительная информация.

Теги:
css-transitions

2 ответа

2
Лучший ответ
transition:width 2s;
transition:left 2s;
transition:bottom 2s;

Вы переписываете свойство transition здесь два раза, так что только последнее значение, наконец, "выживает".

Вы должны поместить все три значения, которые хотите оживить, в одно свойство transition,

transition:width 2s, left 2s, bottom 2s;
  • 0
    Хорошо. Что помогает. Левая рамка и настройка ширины реанимируются. Но теперь, когда нижняя часть раскрывается сразу же (без анимации перехода), перед тем, как первые две были анимированы. Так что я, должно быть, сделал что-то еще не так здесь. Как должно работать мое наведение, я хочу, чтобы левый и ширина кадра сначала анимировались, а затем нижний был анимирован последним в плавной постепенной анимации. Что мне нужно сделать?
  • 0
    С переходами вы можете запускать только все, что происходит одновременно. Если вы хотите, чтобы несколько вещей происходили друг за другом, вам придется использовать CSS-анимацию.
Показать ещё 1 комментарий
0

О, я нашел ответ.

Я должен делать так.

#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. Именно поэтому высота была слишком быстро увеличена при наведении курсора, таким образом, анимация не была возможна.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню