动画CSS剪辑

本文介绍了动画CSS剪辑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图使用CSS3过渡动画CSS clip 没有成功。

I am trying to use CSS3 transitions to animate a CSS clip with no sucess. The image just clips without the transition.

我缺少什么？

#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);
}

推荐答案

你只需要给它正确的开始值，像这样：

Your code works just fine. You just have to give it the correct "start" values, like so:

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

这篇关于动画CSS剪辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！