Chciałbym żeby element zaczął podskakiwać jak na niego najadę.
bum.
done.
@-webkit-keyframes bumpingTop {
from { top: -50px; }
to { top: -60px; }
}
@-webkit-keyframes bumpingBottom {
from { bottom: -50px; }
to { bottom: -60px; }
}
.timeline .entry {
position: absolute;
background-color: #ccccff;
border-color: #ccccff;
padding: 10px;
cursor: pointer;
-webkit-animation-duration: .3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
}
.entry.bottom { -webkit-animation-timing-function: ease-in; }
.entry.top { top: -50px; }
.entry.bottom { bottom: -50px; }
.entry.top:hover {-webkit-animation-name: bumpingTop; }
.entry.bottom:hover {-webkit-animation-name: bumpingBottom; }
Wszystko gra, tylko jak teraz opuszczę myszkę z tego elementu to on nie "wsuwa się" (przez np 300ms) na swoje miejsce tylko wskakuje od razu.
Pomyślałem że dodam do .timeline .entry
-webkit-transition: top .3s, bottom .3s;
Ale to nie przynosi rezultatu.
Co począć?
Ps; Jestem gotów przyjąć rozwiązanie z innym podejściem boo na razie mogę go przerabiać do woli. Wolałbym jednak nie korzystać z js (if possible).