Alternatives

Products that do what Pure CSS silky Border line animation(open-source code) does

Use only CSS to achieve a silky border line animation effect. Key implementation ideas include: 1. Perspective effect: Create a border effect by setting up two nested elements with the parent element having 1 pixel padding. 2. animation: Create an absolutely positioned child element and use the animation property to move it uniformly along the border of the parent element. 3. Uniform animation: By calculating the path and distance of the element movement, adjust the percentage of key frames to ensure uniform animation. 4. Rounded corners: Add rounded corners to the parent and child elements,…

1. 1CA
   CSS3 animation▲271

   2012 · thegoodman.cc

2. 2
   CSS Wand▲329

   Easy copy-paste beautiful CSS animations

   2019

3. 3IE
   Image Effects with CSS▲203

   2016 · bennettfeely.com

4. 4
   CSS Background Patterns▲327

   Free editable patterns that actually look cool 😎

   2020

5. 5
   CSS Animation Cheat Sheet▲232

   Awesome CSS3 plugin for spiffy animations

   2014

6. 6
   Animate.css▲191

   Just-add-water CSS animations

   2014

7. 7CS
   CSS Speedrun – A small game to test and improve your CSS knowledge▲213

   2022 · css-speedrun.netlify.app

8. 8CA
   CSS3 Animated Glowing Forms▲182

   I remember seeing the Dragon Labs Dragonfish Glowing Form Demo[1] when it first came out, and it always stuck in my head. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript. I was inspired and wanted to see how close I could get with CSS3. I recommend using a Webkit browser [and you can see an alternate version of the animation on Firefox 4]. [1] http://labs.dragoninteractive.com/panel/demo/

   2011 · kaylarose.github.com

9. 9
   Keyframes.app▲160

   A timeline editor for CSS animations

   2018

10. 10
    CSS Color Gradient Generator▲208

    A novel and easy way to design beautiful color gradients.

    2020

11. 11
    Devsync▲328

    Visually edit CSS. Live-sync the result with your editor.

    2020

12. 12PF
    Performance-focused pure CSS loading animations▲49

    2015 · connoratherton.com

13. 13
    Sketch 101▲230

    Smart Animate, Color variables gradients + more!

    2024

14. 14TA
    Tuesday, a new open-source CSS animation library▲18

    2015 · shakrmedia.github.io

15. 15
    Transforms in CSS▲117

    Free eBook for learning to code animations

    2016

16. 16
    Particular Drift▲140

    Create flowing particle animations out of any image (FOSS)

    2025

17. 17
    CSS Toolkit▲161

    Crazy interactive CSS animation builder (Mac)

    2014

18. 18
    CSS Triggers▲80

    A game of layout, paint and composite

    2014

19. 19
    CSS Gridish▲133

    Automatically build your grid design's CSS code ✨

    2018

20. 20
    20+ Free Tailwind CSS & React Blocks▲184

    Fully coded UI sections with designer file included

    2024

21. 21FT
    Flowbite – Tailwind CSS Components Library▲77

    2021 · flowbite.com

22. 22BJ
    Bounce.js – A tool for generating CSS3 animations▲172

    2014 · bouncejs.com

23. 23
    Stitches▲135

    A template generator with functional CSS

    2018

24. 24
    CSS Blocks by Linkedin▲102

    Blazing fast CSS for your design systems and apps

    2018

Ranked by how close each launch is in meaning, then by votes. Refine with a description →