2021-07-02
2408
#css
Habdul Hazeez
56652
Jul 2, 2021 ⋅ 8 min read

A guide to CSS animations using clip-path()

Habdul Hazeez I teach and write code with interests in web development, computer security, and artificial intelligence.

Recent posts:

Leveraging Typescript Branded Types For Stronger Type Checks

Leveraging TypeScript branded types for stronger type checks

Branded types in TypeScript allow us to write code more clearly, provide more type-safe solutions, and maintain our code more efficiently.

Rashedul Alam
Jul 16, 2024 ⋅ 5 min read
Zoneless Change Detection In Angular 18

Zoneless change detection in Angular 18

Angular v18 introduced an experimental feature called zoneless change detection, eliminating the need for Zone.js.

Yan Sun
Jul 15, 2024 ⋅ 5 min read
Developing Cross Platform Apps With Bun Version 1.1

Developing cross-platform apps with Bun v1.1

For some years now, developers have faced many performance challenges while using traditional JavaScript runtimes like Node.js and Deno. Even […]

Clara Ekekenta
Jul 12, 2024 ⋅ 6 min read
Exploring The Magic Of Runes In Svelte 5

Exploring the magic of runes in Svelte 5

See how to use Svelte 5’s new runes system to declare reactive states and compare them to the existing approach to reactivity in Svelte 4.

Yashodhan Joshi
Jul 11, 2024 ⋅ 7 min read
View all posts

4 Replies to "A guide to CSS animations using <code>clip-path()</code>"

  1. Good article, I like the animated image!
    I think we have to examine the resource requirements of the animation. The infinite loop can be too hard on slower clients browsers. I’m thinking about how can I use it. Maybe the mouse “hover” effect can trigger it or the window scrolling with some JS function.

Leave a Reply