Ivan Bogachev

background: linear-gradient(to right, #f77 0%, #f77 30%, #fff 30%, #fff 100%);

для адаптивной вёрстке?

1. px - если нужно жестко задать размер
   
2. % - если размер привязан к чему-то в процентном отношении
   
3. vw - если нужно привязать что-то к размеру вьюпорта (например размер шрифта)
   
4. vh - то же самое (ну и vmin/vmax туда же)
   
5. em - если нужно привязать размер чего-то к размеру шрифта (текущему или родительскому)
   
6. rem - то же самое, но глобально (можно использовать везде и для всего)
   
7. cm, mm, in, pt, pc - если нужно красиво выводить на печать
   
8. ex, ch - не сильно удобные единицы измерения в текущих реалиях
   

• для псевдо-элементов - двойное двоеточие "::"
  
• для псевдо-классов - одинарное двоеточие ":"
  

актуально ли использовать gremlin.js

Если б он был такой крутой, то его б все использовали

.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;
}

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

Существует ли какое-то решение проблемы, помимо замены 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)" });