Добавление к свойству CSS

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

.enter, .enter-left, .enter-right, .enter-top, .enter-bottom {
  animation: fade-in 2s ease-out;
}

.enter-left {
  animation: fade-in 2s ease-out, enter-left 1s ease-out;
}

Как я могу это сделать, в идеале без jquery? Есть ли способ существенно добавить свойство?

css css-animations

11.12.2018 01:05

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

431

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте переменную CSS, как показано ниже. Уловка состоит в том, чтобы несколько анимаций были определены как переменные со значениями по умолчанию (используйте анимацию нулевой, которая ничего не будет делать), тогда вы просто настраиваете значения внутри подклассов:

.enter, .enter-left, .enter-right, .enter-top, .enter-bottom {
  animation: fade-in 2s ease-out, var(--anim1,null),var(--anim2,null);
}

.enter-left {
  --anim1:enterleft 1s ease-in;
}
.enter-top {
  --anim1:entertop 1s linear;
}

@keyframes fade-in {
  from {opacity:0;}
}
@keyframes enterleft {
  from {transform:translateX(-100px);}
}
@keyframes entertop {
  from {transform:translateY(100px);}
}

@keyframes back {
  from{background:blue;}
}

@keyframes null{
  0%,100%{font:inherit}
}


.box {
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
}

<div class = "box enter"></div>
<div class = "box enter enter-left"></div>
<div class = "box enter enter-top" style = "--anim2:back 5s"></div>

Спасибо! Хотя могло бы быть немного чище: .enter, .enter-left, .enter-right, .enter-top, .enter-bottom {анимация: постепенное появление на 1 секунду, var (- directional); } .enter-left {--directional: 1s легкость входа-выхода, вход-влево; }

— 11.12.2018 02:42

11.12.2018 01:24