html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

@property --per {

  syntax: '<percentage> | <angle>';

  inherits: false;

  initial-value: 25deg;

}

​

div {

    width: 200px;

    height: 200px;

    border-radius: 50%;

    cursor: pointer;

    margin: auto;

}

​

.normal {

    background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); 

    transition: background 300ms;

    &:hover {

        background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%); 

    }

}

​

.property {

    background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); 

    transition: --per 300ms linear;

    &:hover {

        --per: 240deg;

    }

}