Свойство filter задает фильтры для элемента. CSS-фильтры позволяют применить визуальные эффекты к элементам страницы и обычно применяют к изображениям, фонам или рамкам. К CSS-фильтрам можно применять анимации и плавные переходы.

Количество фильтров влияет на скорость загрузки страницы.

Какие бывают фильтры:

brightness — яркость;
contrast — контрастность;
grayscale — бесцветность;
sepia — сепия;
invert— инверсия цвета;
saturate — цветовая насыщенность;

Из любого элемента можно сделать таблицу в CSS, для нужно ему присвоить свойство display: table. При этом элемент будет вести себя в потоке документа как блок. Если задать свойство display: inline-table — табилца будет располагатьсяв одной строке с другими строчными элементами.

.table { display: table; }
.inline-table { display: inline-table; }
.row { display: table-row; }
.cell { display: table-cell; }
.caption { display: table-caption; caption-side: bottom; }
.colgroup { display: table-column-group; }
.col { display: table-column; }
.thead { display: table-header-group; }
.tbody { display: table-row-group; }
.tfoot { display: table-footer-group; }

СSS-анимация состоит из двух частей: набора ключевых кадровkeyframes и параметров самой анимации. Анимация описывает, как будет меняться стиль блока от начальной до конечной точки.

Пример описания и применения анимации:

/* раскадровка */
@keyframes my_animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.btn {
    animation-name: my_animation;
    animation-duration: 1s;
}

Плавные переходы transitions позволяют изменять значения свойств постепенно. С помощью transitions можно управлять только переходом между двумя состояниями: начальным и конечным, в оличие от анимаций. Задаются обычно у базового класса (например .btn), а не у изменяющего состояние (например .btn-active), чтобы переходы происходили плавно в обе стороны.

Свойство transition позволяет изменять состояния объекта плавно (с использованием анимации).

transition: transform 0.5s ease; /* сокращенная форма записи */