You just forgot to put % in keyframe after ${progress - 10} :

const StyledWrapper = styled.div`
    .image-load {
        clip-path: circle(${progress}% at 50% 50%);
        animation: circle 2s;
    }

    @keyframes circle {
        0% {
            clip-path: circle(${progress - 10}% at 50% 50%); // <--- HERE
        }
        100% {
            clip-path: circle(${progress}% at 50% 50%); // <--- HERE
        }
    }
`;

WORKING DEMO :

I would like to clip the image every click with animation. so every click the image should be bigger until it reach 100% size and it’s work well, but the problem is the animation is only work at the first load. here is my js code:

import React, { Component } from "react";
import "./styles.css";
import styled from "styled-components";

class Loading extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 10,
    };
  }
  render() {
    const { progress } = this.state;
    const StyledWrapper = styled.div`
      .image-load {
        clip-path: circle(${progress}% at 50% 50%);
        animation: circle 2s;
      }

      @keyframes circle {
        0% {
          clip-path: circle(${progress - 10} at 50% 50%);
        }
        100% {
          clip-path: circle(${progress} at 50% 50%);
        }
      }
    `;
    return (
      <StyledWrapper>
        <div
          className="container"
          onClick={() => this.setState({ progress: progress + 10 })}
        >
          <img className="image-load" src={require("../../assets/mkpro.png")} />
        </div>
      </StyledWrapper>
    );
  }
}

export default Loading;

and this is my css file:

.container {
  position: relative;
}
.image-load {
  width: 600px;
  height: auto;
  clip-path: circle(10% at 50% 50%);
  animation: circle 2s;
}

thank you