Ivan Bogachev

.example {
    background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
        linear-gradient(to right, #fff, #fff); // правая
    background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
    background-position: top left, top left, bottom left, top right;
    background-repeat: no-repeat;
}

Сейчас я её решил переименованием файлов, что довольно странно делать

Помню пару лет назад самым популярным был gulp, а до него grunt. Сейчас что-то особо про них не слышно.

Существует ли какое-то решение проблемы, помимо замены translate?

@keyframes logo {
    0% {
        transform: translateX(-120%); /* Раз */
    },
    10% {
        transform: translateX(-120%);
    }
    15% {
        transform: translateX(0%); /* И два */
    },
    100% {
        transform: translateX(0%);
    }
}

Попробовал несколько вариантов, ни один не работает.

Существует ли библиотека которая ориентируется на базу данных caniuse и в процессе написания css кода автоматически предупреждает что для выбранных браузеров то или иное свойство не поддерживается

И может есть какие то (?каталоги?) где можно найти подобного формата различные интересные (?фишки?) ?

По caniuse поддержка есть

для точек нужный центр указан..

TweenLite.from("...", 1.5, { transform: "matrix(0, 0, 0, 0, 131, 77)" });

...может это какая библиотека js... ...и с помощью js менять длину...

И как вообще это реализовать?