Как воспроизвести несколько анимаций подряд в CSS?

Я не могу проиграть несколько анимаций одну за другой с "плавным" эффектом:

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1s, pulse 0.5s ease 1s;
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
		}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

<div id = "circle"></div>

Я делаю что-то неправильно? Я хочу держать ключевые кадры отдельно.

Дайте определение «эффект текучести».

— 29.05.2018 15:52

Пожалуйста, поясните, как вы хотите, чтобы ваш код вел себя и как он в настоящее время не соответствует этому.

— 29.05.2018 15:57

css css-animations

29.05.2018 15:41

Приемы 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 сценарий полностью изменился.

213

Ответы 4

Возможно, вам придется рассмотреть forwards на втором, чтобы сохранить его последнее состояние, потому что на самом деле, когда обе анимации заканчиваются, ваш элемент возвращается к начальному значению масштабного преобразования, которое составляет scale(1)(точнее это transform:none)

#circle {
  border-radius: 50%;
  background: red;
  animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
  height: 100px;
  width: 100px;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

<div id = "circle"></div>

ОБНОВИТЬ

Время ожидания связано с используемым animation-timing-function, который является ease для обоих, и это означает, что у вас будет замедление (медленное в конце) и замедление (медленное в начале), которые создают такое поведение пауза между обеими анимациями. . Если вы измените первый на ease-in, а последний на ease-out, у вас не будет этой проблемы.

#circle {
  border-radius: 50%;
  background: red;
  animation: zoomIn 1s ease-in, pulse 0.5s ease-out 1s forwards;
  height: 100px;
  width: 100px;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

<div id = "circle"></div>

Проблема заключается в времени паузы между двумя анимациями, даже если вторая анимация воспроизводится быстро, мы видим очень короткую остановку между ними.

— 29.05.2018 16:06

29.05.2018 15:52

Анимация пульса заканчивается на масштабе 1,1, а затем круг возвращается к масштабу 1. Возможно, ключевые кадры пульса должны быть следующими:

@keyframes pulse {
        from {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
}

В приведенном ниже фрагменте вы не видите привязки, но, может быть, это не тот эффект, который вы искали?

#circle {
			border-radius: 50%;
			background: red;
			animation: zoomIn 1s, pulse 0.5s ease 1s;
			height: 100px;
			width: 100px;
		}

		@keyframes zoomIn {
			0% {
				transform: scale(0);
			}
			100% {
				transform: scale(1);
			}
		}

		@keyframes pulse {
			from {
				transform: scale(1);
			}
			50% {
				transform: scale(1.1);
			}
      100% {
         transform: scale(1);
      }
		}

<div id = "circle"></div>

29.05.2018 15:53

Вам нужен короткий импульс в конце, когда ваш круг масштабируется до 1, я полагаю, это ваш эффект плавности. Вместо того, чтобы использовать разные анимации, почему бы нам немного не настроить ключевые кадры в анимации ZoomIn.

HTML:

<div id = "circle"></div>

CSS:

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 0.4s ease-out;
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

Надеюсь это поможет.

29.05.2018 16:15

единственная анимация - «Преобразование», лучше всего использовать настройку «функции времени», я рекомендую утилиту «Кубик-Безье» зайти на этот сайт http://cubic-bezier.com и попрактиковаться. Прочтите перед этим что-нибудь о кривой Безье.

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

<div id = "circle"></div>

ОБНОВИТЬ

или эта другая "временная функция"

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1.5s cubic-bezier(.56,1,.92,.7);
    height: 100px;
    width: 100px;
    animation-fill-mode: forwards; /* */
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1.1);
    }
}