Анимация CSS3: неактивное, активное и дополнительное «конечное» состояние?

У меня есть кнопка с анимированным фоном при наведении. Он заполняется цветным фоном слева направо, однако в настоящее время при наведении мыши анимация меняется на противоположную; цвет сжимается обратно влево и исчезает. При выходе из мыши я хотел бы, чтобы заливка продолжала двигаться слева направо, чтобы она исчезала справа от кнопки. Любые идеи? Пример этого можно увидеть на кнопке «ПОСЕТИТЬ ВЕБ-САЙТ» здесь:

http://www.notashop.com.au/new/project/lifewithbird/

В идеале хотелось бы сделать это с помощью анимации CSS3, однако я чувствую, что активное/неактивное состояние анимации css3 может быть здесь ограничивающим фактором. Если это невозможно сделать с помощью CSS3, есть идеи с использованием jQuery? jsfiddle был бы очень признателен!

Спасибо за вашу помощь!


state css css-animations hover
person smulla1    schedule 22.05.2014    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Готовы к чему-то классному... Вам нужно будет сделать этот мультибраузер удобным, но это просто. Это готово в фф

вот скрипта

.button {
    background: blue;
    width: 200px;
    height: 45px;
    position: relative;

}

.button:before {
    background: none repeat scroll 0 0 #FFFFFF;
    content: "";
    height: 45px;
    left: 100%;
    position: absolute;
    width: 200px;
    z-index: 1;
transition: all 0.5s ease;
}
.button:hover:before{
    -webkit-animation: left 1s;
  -moz-animation:    left 1s;
  -o-animation:      left 1s;
  animation:         left 1s;
  animation-fill-mode:forwards;
}
.button p{
    position: absolute;
    left: 50%;
    top: 5px;
    z-index: 2
}
@keyframes left {
    0% {left: -100%;}
    50% {animation-play-state: paused; }
    100%{left: 0%; animation-play-state: paused;}
}

У тебя будет много вопросов...

person Cam    schedule 22.05.2014
comment
Вы смотрели на это в Firefox? - person Cam; 22.05.2014
comment
Извините, не увидел ваш комментарий «готов в FF». Большое спасибо Кэм! Выглядит отлично - person smulla1; 23.05.2014
comment
Однако я изо всех сил пытаюсь понять, как заставить его работать в GC и других браузерах? Все ли они поддерживают ключевые кадры? Что заставляет это работать в FF, но сбивает с толку других (вы, кажется, знали, что это не сработает в других, надеясь, что знаете, над какой областью нужно поработать?) - person smulla1; 23.05.2014
comment
Да, вы должны включить -o- -moz- и -webkit - person Cam; 23.05.2014