Pie анимация с картинкой

[drakonolom]

Всем привет! Думаю как сделать вот эту анимацию :https://css-tricks.com/css-pie-timer/ но чтоб вместо синего цвета была картинка которая будет постепенно открыватся за счет этой же анимации?

[Malleys]

Одна картинка, одна анимация, два свойства...

<img src="https://placeimg.com/300/300/animals">
<style>
img {
  border-radius: 50%;
  animation: 10s pie infinite linear;
}

@keyframes pie {
    0% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
    }

    25% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
        clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
    }

    50% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
        clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
    }

    75% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
        clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
    }

    100% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
    }
}
</style>

Этого достаточно!

#funfact Анимация была сгенерирована при помощи скрипта

var r = 50;
var R = 3 * r;

var getPoint = (p, k, t) => `${
    Math.round(R * Math.cos((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}% ${
    Math.round(R * Math.sin((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}%`;

var getKeyframe = (k, t) => `polygon(${getPoint(0, k, t)}, 50% 50%, ${[3, 2, 1].map(p => getPoint(p, k, t)).join(", ")})`;

var getKeyframes = t => k => `
    ${Math.round(100 / t * k)}% {
        -webkit-clip-path: ${getKeyframe(k, t)};
        clip-path: ${getKeyframe(k, t)};
    }`;
    
var rule = t => `@keyframes pie {${Array.from(Array(t + 1), (_, i) => i).map(getKeyframes(t)).join("\n")}\n}`;
console.log(rule(4));

Но перед этим были построены точки desmos.com/calculator/z1xftsuv7u

[рони]

Malleys,
здорово ...

[drakonolom]

<img src="https://placeimg.com/300/300/animals">
<style>
img {
  border-radius: 50%;
  animation: 10s pie infinite linear;
}

@keyframes pie {
    0% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
    }

    25% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
        clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
    }

    50% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
        clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
    }

    75% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
        clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
    }

    100% {
        -webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
        clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
    }
}
</style>

очень круто, правда сложновато в понимании, все-равно спасибо!