jQuery i CSS animacje

Question

Hej,

mam mały problem dotyczący animacji. Link do codepen.

http://codepen.io/KonradesignStudio/pen/mOaQyO?editors=1100

Chodzi o to że jak mam animacje w CSS i najeżdżam myszką na jeden z obrazów to w keyframes animacja się odtwarza od opacity 0.2 do 1.0 i wygląda to fajnie ale jeśli zabiorę mysz to wtedy momentalnie opacity spada do 0.2 a chciałbym żeby w dwie strony działo się to płynnie.

Dzięki z góry!

Answer 1

Problem polega na tym, że gdy wskaźnik opuszcza element

.center:hover{
  width: 80%;
  animation: leftan 500ms forwards;
}

usuwasz z niego animację. Zamień linijkę animation na opacity: 1;