реагировать css стиль обновления onclick

Question

Я хотел бы обрезать изображение при каждом нажатии с анимацией. поэтому при каждом нажатии изображение должно увеличиваться, пока не достигнет 100% размера, и оно будет работать хорошо, но проблема в том, что анимация работает только при первой загрузке. вот мой js код:

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;

а это мой css файл:

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

спасибо

Answer 1

Вы просто забыли поставить % в ключевой кадр после ${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
        }
    }
`;

РАБОЧАЯ ДЕМО: