[test] - animación de borde

SOLO FIREFOX // Se crean bordes con SVG a los cuales se les agrega animación

by Porfirio Chavez

HTML

<!-- Código BETA de animación de borde -->
<div>
    <svg width="200" height="200">
        <line class="top" x1="0" y1="0" x2="600" y2="0"/>
        <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
        <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
        <line class="right" x1="200" y1="0" x2="200" y2="600"/>
    </svg>
</div>

CSS

@keyframes thumbTop {
            0% { transform: translateX(-200px);
                opacity: 1;}
            50% { transform: translateX(-600px);
                opacity: 1;}
            100% { transform: translateX(-600px);
                opacity: 0;}
        }

        @keyframes thumbBottom {
            0% { transform: translateX(200px);
                opacity: 1;}
            50% { transform: translateX(600px);
                opacity: 1;}
            100% { transform: translateX(600px); }
        }

        @keyframes thumbLeft{
            0% { transform: translateY(200px);
                opacity: 1;}
            50% { transform: translateY(600px);
                opacity: 1;}
            100% { transform: translateY(600px); }
        }

        @keyframes thumbRight{
            0% { transform: translateY(-200px);
                opacity: 1}
            50% { transform: translateY(-600px);
                opacity: 1;}
            100% { transform: translateY(-600px); }
        }

        @keyframes thumbRight{
            0% { transform: translateY(-200px);
                opacity: 1}
            50% { transform: translateY(-600px);
                opacity: 1;}
            100% { transform: translateY(-600px); }
        }

        div {
            width: 200px;
            height: 200px;
            position: relative;
            background: #ddd;
        }

        svg {
            position: absolute;
            top: 0;
            left: 0;
        }

        svg line {
            stroke-width: 10;
            stroke: #000;
            fill: none;
            stroke-dasharray: 200;
            transition: transform .6s;
            opacity: 0;
        }

        div:hover svg line.top {
            /*
            transform: translateX(-400px);
            transform: translateX(-400px);
            */
            animation-name: thumbTop;
            animation-duration: 2000ms;
            transform-origin:50% 50%;
           ...