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

Question

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

#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>

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

Answer 1

единственная анимация - «Преобразование», лучше всего использовать настройку «функции синхронизации», я рекомендую утилиты «Cubic-bezier» перейти на этот сайт 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);
    }
}

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

Answer 2

Ваша анимация пульса заканчивается в масштабе 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>

Answer 3

Вам нужен короткий импульс в конце, когда ваш круг масштабируется до 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);
    }
}

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

Answer 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>