Как включить анимацию при появление блока?

Question

[Артур Левенсон]

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

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

https://codepen.io/kiskiskit/pen/PobQyWz

Comments

[Danny Arty]

с помощью js

[Артур Левенсон]

Danny Arty, можете подсказать более детально пожалуйста

Answer 1

[SpardaPrime]

Изменил немного стили

.from-me {
       position: relative;
       display: none; // добавил свойство
       padding: 10px 20px;
       color: white;
       background: #0b93f6;
       border-radius: 25px;
       float: right;
  }

 .loud {
       display: block; // добавил свойство
       animation-duration: 1.5s;
       animation-fill-mode: both;
       animation-timing-function: ease-in-out;
       transform-origin: center center;
       animation-name: loud;
  }
.content {
  width: 100%; // и тут у тебя ошибка widht
  height: 500px
}

javascrpt код по которому при прокрутке до конца страницы выскакивает блок

const sms = document.querySelector('.from-me');
    
const scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

  document.addEventListener('scroll',()=>{
    window.pageYOffset+document.documentElement.clientHeight===scrollHeight&&sms.classList.add('loud');
  })