Помогите с ИНТЕРЕСНОЙ простой анимацией обьекта

Общее
1

При наведении на весь обьект .wrapper-logo, как сделать анимацию быстрее, что бы повышался пульс и сердце билось быстрее. Может кто поможет, с помощью css или jquery.

http://codepen.io/SergeyBosak/pen/GgQdeq

Добавил

.wrapper-logo:hover .half {
    background: #33eedd;
    animation: pounding .4s linear infinite alternate;
}

Выборка работает и фон меняется, но не анимируется.

2 лайка
2

Создай 2ю идентичную анимацию и укажи ее при :hover

@keyframes pounding-fast{
  100%{
    transform:scale(1.2);
  }
}
.wrapper-logo:hover .half {
  background: #33eedd;
  animation: pounding-fast .2s linear infinite alternate;
}
2 лайка
3

поменяй на .wrapper-logo:hover .heart
у тебя класс неправильно написан
цель же анимировать сердце, а не блок half?

1 лайк
5

Ээм так анимация стоит на .hart (две половинки) а .heart это обертка.

.half{ 
  margin-left: 40px;
  width:100px; 
  height:100px;
  animation: pounding .5s linear infinite alternate;
}

.heart создал для того что бы при анимации scale, сердце не сдвигало другие обьекты.
А вообще странно то что если анимацию поставить на обертку .heart то анимация работает, то есть и при hover она меняется, но подлагивает…

Вот сделал тут http://codepen.io/SergeyBosak/full/jEZzjr

7

Да, видимо, анимация не переопределяется. Необходимы две разных анимации под разные действия.

8

Как мне спрятать первую анимацию при наведении ? :no_mouth:

9

Ничего не надо прятать. Сделайте так, как подсказывали выше (elemeNtk0):
@keyframes pounding{
100%{
transform:scale(1.2);
}
}
@keyframes rel{
100%{
transform:scale(1.2);
}
}
.wrapper-logo:hover .half {
animation: rel .2s linear infinite alternate;
}

Получается, что скидывается предыдущая анимация новой. Проверяется легко, задав другую трансформацию первому кейфрейму, например, transform:rotate(45deg);

1 лайк
10

Хм… что не так… или где то ошибка или такой вариант не подходит, ее глючит все равно. :weary:
http://codepen.io/SergeyBosak/pen/GgQdeq?editors=110

11

В чем проявляется глюк? Сердце же ускоряется? Вендорные префиксы, может, прописать?

12

Я поставил авто префикс в codpen, оно бывает попадает в ритм старой анимации а бывает глючит. Попробуйте несколько раз навести…

13

Анимация четко работает в хроме, лисе и опере. У двух последних только сердце вниз уезжает, но порядок анимации работает норм.

14

Странно, ну у меня трусит когда как :disappointed_relieved:

Скинул в sublime, там префиксы прописал, все равно трусит когда как…
Мне кажется что это из-за старой анимации, он когда в ритм попадает с hover анимацией тогда не глючит…

15

Анимация работает отлично, проверено 100500 раз на разных браузерах :smiley: .

16

Скиньте видос глюка

1 лайк