Filling a block with an animated border?

Question

css

There is a block, 200 by 50 pixels. Which should have the upper and left corner set by the border, but not completely, but let's say only 50%, and when hovering over it, it should be filled with the border to the end, from both sides, smoothly.
For clarity,

Guys, tell me an approximate implementation, or poke where you can read. because Google did not give me anything sensible on the topic :(

Answer 1

SVG animation, the easiest thing to do

Answer 2

border-image - an incomplete border can be made using it.

Answer 3

svg is better, but css is also possible

<div class="qwe">
        qweqwe
    </div>
    <style>
        .qwe{
            display: inline-block;
            padding: 20px;
            border: 2px solid lightgray;
            position: relative;
        }
        .qwe:before,
        .qwe:after{
            content: '';
            display: block;
            position: absolute;
            top: -2px;
            left: -2px;
            width: 0;
            height: 0;
        }
        .qwe:before{
            border-left: 0 solid green;
            border-bottom: 0 solid green;
        }
        .qwe:after{
            border-top: 0 solid green;
            border-right: 0 solid green;
        }
        .qwe:hover:before,
        .qwe:hover:after{
            border-width: 2px;
            height: calc(100% + 4px);
            width: calc(100% + 4px);
        }
        .qwe:hover:before{
            transition: height 1s linear , width 1s 1s linear ;
        }
        .qwe:hover:after{
            transition: width 1s linear , height 1s 1s linear ;
        }
    </style>

Answer 4

1. Use border-image with gradient and animate it.
2. Use :before and :after blocks. For the main block, the borders are set like this - the left and top gray, the right and bottom of the color you need. The :before block with zero dimensions, position: absolute to the top left corner, the top and left borders of the color you want, the :after block to the bottom right corner, the width and height of the parent block, the border color is gray.
On hover, animate the dimensions of the :before block to 100% of the parent block, the :after block to 0. You make the animation delay of the :after block such that it starts firing immediately after the :before animation ends.
It will turn out that the :before block expands to fill the left and right sides with the border of the desired color, and the :after block shrinks to remove the gray border and reveal the border of the desired color on the right and below.

Answer 5

you can even shove an animated gif into the border

Answer 6

https://jsfiddle.net/slippyk/1h8c8x95/4/

Answer 7

codepen.io/Geyan/pen/EyLkox?editors=0100 like this