css - 动画 CSS 剪辑

Question

我正在尝试使用 CSS3 转换为 CSS clip 设置动画，但没有成功。图像只是剪辑而没有过渡。

我错过了什么？

#clipped {
    position:absolute;
    width: auto;
    clip: rect(100, 100, 100, 100);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
#clipped:hover {
    clip: rect(50px, 200px, 200px, 0);
}

Fiddle

Answer 1

您的代码运行良好。你只需要给它正确的“开始”值，就像这样:

img {
  position: absolute;
  display: block;
  clip: rect(10px, 100px, 200px, 0);
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

img:hover {
  clip: rect(80px, 200px, 250px, 50px);
}

<img src="http://i.stack.imgur.com/Wr86X.jpg">