[PURE CSS] border animation without svg

Samael — Mon, 11 Jul 2022 20:30:01 +0000

I improved the code you shared with us, it now work with variable size and can be placed everywhere, maybe that will interest you :)

This is the CSS you can put it in a file:

:root {
    --box-width: 200px;
    --box-lenght: 200px;

    --box-animation-width: calc(var(--box-width) + 20px);
    --box-animation-lenght: calc(var(--box-lenght) + 20px);
}

.animbox::before,
.animbox::after,
.animbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.animbox {
    width: var(--box-width);
    height: var(--box-lenght);
    margin: auto;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}

.animbox::before,
.animbox::after {
    content: "";
    z-index: -1;
    margin: -10px;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}

.animbox::before {
    animation-delay: -4s;
}

.animbox:hover::after,
.animbox:hover::before {
    background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
    0% {
        clip: rect(0px, var(--box-animation-width), 2px, 0px); /*  ligne du haut */
    }
    25% {
        clip: rect(0px, 2px, var(--box-animation-lenght), 0px); /* ligne de gauche */
    }
    50% {
        clip: rect(calc(var(--box-animation-lenght) - 2px), var(--box-animation-width), var(--box-animation-lenght), 0px); /*  ligne du bas */
    }
    75% {
        clip: rect(0px, var(--box-animation-width), var(--box-animation-lenght), calc(var(--box-animation-width) - 2px) ); /* ligne de droite */
    }
    100% {
        clip: rect(0px, var(--box-animation-width), 2px, 0px); /* ligne du haut */
    }
}

html,
body {
    height: 100%;
}

body {
    background-color: #0f222b;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.animboxpospadding {
    padding-top: 250px;
    position: relative;
    margin: 50px;
}

And if you want to use it with a relative position :

<div class="animboxpospadding">    
        <div>
            <div class="animbox"></div>
        </div>
    </div>

How this can be useful for any of you

single element animation icon~

inspired by:
http://tympanus.net/Tutorials/BorderAnimationSVG/
&
http://mopcon.org/2014/news.php

brower support:

animation: IE10+
clip: all browser

DEV Community: Samael

[PURE CSS] border animation without svg