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">

Answer 2

根据 this site ，不支持rect中的百分比。

如果你知道图片的大小，可以这样做： DEMO

#clipped {
    clip: rect(0, 350px, 350px, 0);
}

或者，您可以使用更大的数字来容纳更大的图像，而不是使用350px。您可能需要使用数字来获得均匀的动画。

Answer 3

因为你的第一个没有单位的剪辑，你不能改变剪辑改变的功能;

clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%); }

span:hover:before{ clip-path: polygon(0% 0%,100% 0%,0% 100%,0% 100%,); }

动画CSS剪辑

3 个答案: