2

есть один css стиль:

.heart{
  color: transparent;
  background: linear-gradient(to left, #FF3008,#B91D28,#FF3008);
  background-size: 1000px 100%;
  animation: gradient_animate 25s linear infinite;
  animation: heart_beat 1.6s linear;
  transition: 0.25s;
}

и две анимации:

@keyframes heart_beat {
  0% {
    font-size: 15px;
  }
  25% {
    font-size: 17px;
  }
  50% {
    font-size: 15px;
  }
  75% {
    font-size: 17px;
  }
  100%{
    font-size: 15px;
  }


 @keyframes gradient_animate {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}

Как сделать, чтобы работали обе анимации, а не только одна?

1 ответ 1

5

Перечисляйте анимации через запятую:

animation: gradient_animate 25s linear infinite, heart_beat 1.6s linear;
3
  • 1
    Вот она ирония судьбы За хороший ответ, который требует глубоких знаний, творческого подхода чаще всего 0 или +1, у тебя а за простенький ответ, требующий 20 секунд и который есть во всех туториалах CSS богатый урожай. Это просто мысли вслух Юра. Причем неоригинальные.. 1 окт 2020 в 8:53
  • @Alexandr_TT: вот, не поверишь - эта очевидность обманчива - я в своё время кое-как нашёл инфу как раз по перечислению и сокращённым свойствам. Сейчас помню или просто знаю, что она где-то есть, а на тот момент, голову ломал, а результаты поиска наводили на мысль, что такой инфы вообще не существует. Или написано так, что "не знал и голова не болела"))
    – UModeL
    1 окт 2020 в 9:12
  • 1
    вполне возможно, зачем я это написал, не знаю :) Просто наблюдается тенденция. И вопрос ни к тебе, ни ко мне, надо принимать как данность 1 окт 2020 в 9:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.