Question

img{
filter:brightness(20%)
animation-name:f;
animation-duration:5s;
}
@keyframes f{
50%{filter:brightness(150%)
}

<!Doctype html>
<html>
  <body>
    <img src="http://www.sololearn.com/images/tree.jpg">
  <body>
<html>

我希望动画效果在将鼠标悬停在图像上时生效

Answer 1

在:hover上使用img伪类

img{
  filter:brightness(20%);
  animation-duration: 5s;
}

img:hover {
  animation-name: f;
}
  
@keyframes f{
   50%{ filter: brightness(150%); }
}

<img src="http://www.sololearn.com/images/tree.jpg">