Animate CSS Clip

Animate CSS clip

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

Is it possible to animate the css clip-path property using jQuery?

Based on georg's proposal (see: https://stackoverflow.com/a/16857838/7323120) I was able to figure it out myself. Using the animate method you can iterate over custom value ranges and adjust the respective css in the method's callback like:

$({step: 0}).animate({step: 80}, {
   step: function(val) {
      // val equals the current step
      $('#target').css('clip-path', "inset(0px "+val+"px 0px 0px)")
   }
});
        

Unable to transition or animate css clip-path

You need to also animate the path even when using clip-path. You cannot have transition between two different SVG clip-path

.svg-clipped {  clip-path: url(#svgNarwhal);  background: linear-gradient(red,blue);  height: 200px;}

<div class="svg-clipped"></div><svg height="0" width="0">            <defs>                <clipPath id="svgNarwhal">                    <path d="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z"> <animate attributeName="d" dur="3s" values="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z;m 12.078446,138.49125 c 23.145893,-23.16487 -21.3363753,-20.31025 -7.0553753,-90.921251 c -6.408,-4.928 -4.77299995,-22.843 -1.058,-27.925 c -3.28599995,-5.915 -5.064,-11.8330002 -3.22399995,-19.6450002133789 c 10.35345725,4.2783550133789 4.35832795,13.2052152133789 9.18816095,16.3896842133789 c 2.8348133,-3.978774 19.8995273,-2.5827 22.8368203,-0.382425 c 2.220562,-3.72037 15.774695,-13.7547922 15.40755,-8.9030092 c -4.465134,2.454775 -0.708624,4.2837742 -9.01695,12.2244882 c 5.32964,8.207908 5.679349,17.501915 5.65539,25.031104 c 25.576849,28.403498 32.428749,80.056389 26.911139,100.271799 c -19.030258,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.220643,3.16303 3.817097,5.07083 3.507083,11.49096 c -11.422622,-10.20222 -22.302117,-8.01914 -35.799438,-3.10272 z" keyTimes="0;1" repeatCount="indefinite" />        </path>                </clipPath>            </defs>        </svg>

How to animate clipping paths defined in SVG elements?

You need to animate the SVG itself using animate

.box {  width:300px;  height:200px;  background:red;  clip-path: url(#shape--start);}

<svg width=0 height=0>    <defs>        <clipPath id="shape--start">            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778">            <animate attributeType="XML" attributeName="points"             from="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778"             to="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"          dur="2s" repeatCount="indefinite"/>            </polygon>        </clipPath>    </defs></svg><div class="box">
</div>

CSS - Possible to animate clip on an image to reveal quadrants clockwise?

If you want a 'ticking' effect like the hand on an analogue clock you can use CSS mask with a conic gradient which will gradually reveal the underneath image.

This snippet creates a CSS animation (using JS as I was too lazy to type it all in) with 60 animation points, changing the conic gradient by 6 degrees each time. It adds the animation to the top image on hover.

// create the 60 part animation
let keyframes = '@keyframes tickround {';
for (let i = 0; i <= 60; i++) {
  keyframes += i * 100 / 60 + '% {-webkit-mask-image: conic-gradient(transparent ' + 6 * i + 'deg ' + 6 * (i + 1) + 'deg, black ' + 6 * (i + 1) + 'deg 360deg); mask-image: conic-gradient(transparent ' + 6 * i + 'deg ' + 6 * (i + 1) + 'deg, black ' + 6 * (i + 1) + 'deg 360deg);}';
}
keyframes += '}';
const newstyle = document.createElement('style');
newstyle.innerHTML = keyframes;
document.head.appendChild(newstyle);

.image-container {
  position: relative;
  height: 180px;
  width: 180px;
  border-radius: 180px;
  overflow: hidden;
}

.image-container img {
  max-width: 100%;
}

.image-container img.top-image {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
}

.image-container img.top-image:hover {
  animation: tickround 60s linear infinite;
}

<div class="image-container">
  <img src="https://e7.pngegg.com/pngimages/377/831/png-clipart-golden-circle-background-golden-circle-thumbnail.png" />
  <img class="top-image" src="https://www.pngjoy.com/pngm/380/18164680_circle-frame-vector-brown-round-frame-clip-art.png" />
</div>

CSS Clip/Path/Mask/Shape Animation with circle or arc segment

Turns out, "pie chart" is the term to google by...

Based on an extensive article by Lea Verou featuring 2 different approaches https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/, this is my solution:

<svg viewbox="0 0 16 16" width="100px" height="100px" fill="none">

  <circle cx="8" cy="8" r="4" stroke="#000" data-fallback="edge"
    stroke-width="8px"
    transform="rotate(-90, 8, 8)"
    stroke-dasharray="0, 100" >
    
    <animate attributeName="stroke-dasharray"
      dur="2s" to="100,100"
      fill="freeze" />

  </circle>

</svg> 

Animating clip-path in safari not working

Update .pane css from fixed to absolute seems to works:

https://jsfiddle.net/d32bm6jo/5/

---

Related Topics