Использование переходов CSS3 на «верхнем» позиционировании

Question

Я понимаю, что можно использовать анимацию CSS3 в «верхнем» позиционировании.

У меня есть графический объект, который я хочу переместить, сдвинув его всего на 50 пикселей, когда пользователь прокручивается мимо определенной точки.

Мне удалось получить текст для изменения, но я не смог его плавно перейти от 50 пикселей к 0px, вместо этого он «резко скачет».

Вот JS Fiddle: https://jsfiddle.net/0rkbz7ox/

Он работает путем удаления класса «скрытый», который скорректировал значение top назад 0 из 50, но это не живой, несмотря на добавление transition к оригинальному имени класса.

CSS-для графики:

.about-graphic{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;} 
.about-graphic.hidden{position:relative;top:50px;} 

Answer 1

Обнаруженный мою ошибку.

Оригинальное состояние должно содержать top:0; и position:relative, чтобы анимировать, все оригинальные CSS должны быть там.

.about-graphic{top:0;position:relative;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;} 

.about-graphic.hidden{top:50px;} 

Answer 2

Просто добавьте position: relative; top: 0; к .about-graphic так:

.about-graphic { 
    ... // Your transitions 
    position: relative; 
    top: 0; 
} 

Вы можете увеличить продолжительность перехода, чтобы увидеть эффект ясно.