1

Hi all that is my first question here :)

How can i reverse animation when mouse leave element?

http://jsfiddle.net/ps3PT/

<ul class="thumb-list">
    <li>
        <a href=""><img  src="photo.jpg" alt="BlaBla"></a>
    </li>
    <li>
        <a href=""><img  src="photo.jpg" alt="BlaBla"></a>
    </li>
    <li>
        <a href=""><img  src="bd2.png" alt="BlaBla"></a>
    </li>
</ul>
gagna
  • 67
  • 1
  • 1
  • 5

1 Answers1

2

In this case, you should use a CSS transition as opposed to an animation. In doing so, the element can be transitioned when hovering on/off. Just place the transition properties on the img element itself.

Updated Example

.thumb-list li a img {
    height: 128px;
    width: 128px;
    border: 20px solid rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}
.thumb-list li a img:hover {
    -moz-border-radius: 30%;
    -webkit-border-radius: 30%;
    border-radius: 30%;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Thank you this made the trick but "It is possible to reverse a @keyframes animation when element lose hover?" – gagna May 09 '14 at 17:31
  • @gagna Take a look at this [example](http://jsfiddle.net/86kZm/).. You can also refer to [this question](http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover).. it may be helpful. – Josh Crozier May 09 '14 at 17:36