0

экспериментирую с CSS анимацией, столкнулся с проблемой анимации text-shdow, ниже по ссылке на codepen можно увидеть пример моего кода. Проблема заключается в том, что в обычных условиях (без анимации) text-shadow отображается верно, в моем случае нужно вытащить тень влево и вправо одновременно. При выполнении анимации тень должна увеличиваться так же влево и вправо. Но она уходит лишь влево! Что я не так делаю?

@keyframes rampage {
  0%{transform:scale(3) rotate(0deg)}
  3%{transform:scale(2.9) rotate(-1deg)}
  6%{transform:scale(2.8) rotate(1deg)}
  9%{transform:scale(2.7) rotate(-1deg)}
  12%{transform:scale(2.6) rotate(1deg)}
  15%{transform:scale(2.5) rotate(-1deg)}
  18%{transform:scale(2.4) rotate(1deg)}
  21%{transform:scale(2.3) rotate(-1deg)}
  24%{transform:scale(2.2) rotate(1deg)}
  27%{transform:scale(2.1) rotate(-1deg)}
  30%{transform:scale(2) rotate(1deg)}
  33%{transform:scale(1.9) rotate(-1deg)}
  36%{transform:scale(1.8) rotate(1deg)}
  39%{transform:scale(1.7) rotate(-1deg)}
  42%{transform:scale(1.6) rotate(1deg)}
  45%{transform:scale(1.5) rotate(-1deg)}
  48%{transform:scale(1.4) rotate(1deg)}
  51%{transform:scale(1.3) rotate(-1deg)}
  54%{transform:scale(1.2) rotate(1deg)}
  57%{transform:scale(1.1) rotate(-1deg)}
  60%{color:white;transform:scale(1) rotate(0);
    text-shadow:
    -5px 0 1px rgba(255,255,255,1),
    5px 0 1px rgba(255,255,255,1)}
  64%{text-shadow:
    -5px 0 4px rgba(255,255,255,1),
    5px 0 4px rgba(255,255,255,1)},
    -10px 0 4px rgba(255,255,255,1),
    10px 0 4px rgba(255,255,255,1)}
  68%{text-shadow:
    -5px 0 7px rgba(255,255,255,1),
    5px 0 7px rgba(255,255,255,1)},
    -10px 0 7px rgba(255,255,255,1),
    10px 0 7px rgba(255,255,255,1)},
    -15px 0 7px rgba(255,255,255,1),
    15px 0 7px rgba(255,255,255,1)}
  70%{text-shadow:
    -5px 0 10px rgba(255,255,255,1),
    5px 0 10px rgba(255,255,255,1)},
    -10px 0 10px rgba(255,255,255,1),
    10px 0 10px rgba(255,255,255,1)},
    -15px 0 10px rgba(255,255,255,1),
    15px 0 10px rgba(255,255,255,1)},
    -20px 0 10px rgba(255,255,255,1),
    20px 0 10px rgba(255,255,255,1)}
  99%{color:white}
  100%{color:red;text-shadow:
    -5px 0 10px rgba(255,255,255,0),
    5px 0 10px rgba(255,255,a255,0)},
    -10px 0 10px rgba(255,255,255,0),
    10px 0 10px rgba(255,255,255,0)},
    -15px 0 10px rgba(255,255,255,0),
    15px 0 10px rgba(255,255,255,0)},
    -20px 0 10px rgba(255,255,255,0),
    20px 0 10px rgba(255,255,255,0)}
}

Мой пэн

2 ответа 2

2

Все оно правильно себя ведет. А вот вы банально накосячили в стилях - видимо, плохо копипастили. У вас в каждой четной строке text-shadow лишняя фигурная скобка, вот и отрабатывает только кусок стиля. Плюс опечатки.

0

Да, у вас в css лишние скобки. Если я ничего не пропустил - вот так будет более правильно

$("#start").click(function() {
  $("span").addClass("rampage");
  $(".rampage").one("webkitAnimationEnd oanimationend msAnimationEnd animationend",   
    function(e) {
    setTimeout(function(){
        $("span").removeClass("rampage");
      }, 1000);
    });
});
body {
  font-family: 'Open Sans', sans-serif;
  background:gray;
}
button {
  width:100%;
  font-size:2em;
  margin:10px 0;
}
.test {text-shadow:
    -20px 0 10px rgba(255,0,0,1),
    -15px 0 10px rgba(255,0,0,1),
    -10px 0 10px rgba(255,0,0,1),
    -5px 0 10px rgba(255,0,0,1),
    5px 0 10px rgba(255,0,0,1),
    10px 0 10px rgba(255,0,0,1),
    15px 0 10px rgba(255,0,0,1),
    20px 0 10px rgba(255,0,0,1)}
.inner {
  position:absolute;
  left:50%;top:50%;
  transform: translate(-50%,-50%);
}
span {
  display:block;
  font-weight:bold;
  font-size:1.4em;
  text-align:center;
  margin: 30px;
  color:red;
  opacity:0;
}
.rampage {
  opacity:1;
  animation: rampage 1s linear;
  text-shadow:
    -20px 0 10px rgba(255,0,0,0),
    -15px 0 10px rgba(255,0,0,0),
    -10px 0 10px rgba(255,0,0,0),
    -5px 0 10px rgba(255,0,0,0),
    5px 0 10px rgba(255,0,0,0),
    10px 0 10px rgba(255,0,0,0),
    15px 0 10px rgba(255,0,0,0),
    20px 0 10px rgba(255,0,0,0)
}
@keyframes rampage {
  0%{transform:scale(3) rotate(0deg)}
  3%{transform:scale(2.9) rotate(-2deg)}
  6%{transform:scale(2.8) rotate(2deg)}
  9%{transform:scale(2.7) rotate(-2deg)}
  12%{transform:scale(2.6) rotate(2deg)}
  15%{transform:scale(2.5) rotate(-2deg)}
  18%{transform:scale(2.4) rotate(2deg)}
  21%{transform:scale(2.3) rotate(-2deg)}
  24%{transform:scale(2.2) rotate(2deg)}
  27%{transform:scale(2.1) rotate(-2deg)}
  30%{transform:scale(2) rotate(2deg)}
  33%{transform:scale(1.9) rotate(-2deg)}
  36%{transform:scale(1.8) rotate(2deg)}
  39%{transform:scale(1.7) rotate(-2deg)}
  42%{transform:scale(1.6) rotate(2deg)}
  45%{transform:scale(1.5) rotate(-2deg)}
  48%{transform:scale(1.4) rotate(2deg)}
  51%{transform:scale(1.3) rotate(-2deg)}
  54%{transform:scale(1.2) rotate(2deg)}
  57%{transform:scale(1.1) rotate(-2deg)}
  60%{color:white;transform:scale(1) rotate(0);
    text-shadow:
    -5px 0 1px rgba(255,255,255,1),
    5px 0 1px rgba(255,255,255,1)}
  64%{text-shadow:
    -5px 0 4px rgba(255,255,255,1),
    5px 0 4px rgba(255,255,255,1),
    -10px 0 4px rgba(255,255,255,1),
    10px 0 4px rgba(255,255,255,1)}
  68%{text-shadow:
    -5px 0 7px rgba(255,255,255,1),
    5px 0 7px rgba(255,255,255,1),
    -10px 0 7px rgba(255,255,255,1),
    10px 0 7px rgba(255,255,255,1),
    -15px 0 7px rgba(255,255,255,1),
    15px 0 7px rgba(255,255,255,1)}
  70%{text-shadow:
    -5px 0 10px rgba(255,255,255,1),
    5px 0 10px rgba(255,255,255,1),
    -10px 0 10px rgba(255,255,255,1),
    10px 0 10px rgba(255,255,255,1),
    -15px 0 10px rgba(255,255,255,1),
    15px 0 10px rgba(255,255,255,1),
    -20px 0 10px rgba(255,255,255,1),
    20px 0 10px rgba(255,255,255,1)}
  99%{color:white}
  100%{color:red;text-shadow:
    -5px 0 10px rgba(255,255,255,0),
    5px 0 10px rgba(255,255,a255,0),
    -10px 0 10px rgba(255,255,255,0),
    10px 0 10px rgba(255,255,255,0),
    -15px 0 10px rgba(255,255,255,0),
    15px 0 10px rgba(255,255,255,0),
    -20px 0 10px rgba(255,255,255,0),
    20px 0 10px rgba(255,255,255,0)}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner"><span>RAMPAGE!!!</span></div>
<button id="start">play effect</button>
<div class="test" align="center">TEST</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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