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

[borus]

Здравствуйте!

Делаю сайт на базе этого шаблона. По сравнению с исходным шаблоном добавил в разметку доп меню с желтыми пунктами Профсоюз и т.д. Это подменю c селектором .headerrow .cell_pad .moduletable:nth-child(2) спозиционировал абсолютно относительно верхнего края родительского элемента div.cell_pad, для чего последнему пришлось дать position:relative; После это вся анимация опустилась на высоту внедрённого элемента с селектором .headerrow .cell_pad .moduletable:nth-child(2). Почему? Ведь в мануале написано, что position:absolute должен заставлять соседние элементы, а именно первый div.moduletable, вести себя так, как будто следующего за ним позиционированного элемента нет совсем.

Начал менять свойства top у колеблющихся шаров и пчёл, уменьшая их на 200 px у всех. В итоге получилось поднять два правых шарика на нормальную высоту. Зато пчёлы и первый слева шар ведут себя не как в оригинале: пчелы в конце траектории скачут, как впрочем и левый шар. 

Почему происходят такие скачки? Как их исправить?

Edited April 17, 2016 by borus

[npofopr]

Хм. В Хроме у меня вроде всё одинаково. 

[borus]

6 часов назад, npofopr сказал:

Хм. В Хроме у меня вроде всё одинаково. 

Здравствуйте. 

Странно. У меня левый подвижный шарик выпрыгивает откуда-то снизу, затем опускается, колеблется и улетает вверх через время. А должен просто появиться в одной точке и через время улететь. 

У всех все нормально отображается, как у npofopr?

[SelenIT]

Цитата

@-webkit-keyframes balloon3 {
    1% { opacity: 1; }
    33% { -webkit-transform: rotate(5deg); top: 480px; opacity: 1; }
    66% { -webkit-transform: rotate(-5deg); top: 480px; opacity: 1; }
    90% { -webkit-transform: rotate(5deg); top: 100px; opacity: 0; }
    91% { top: 480px; opacity: 0; }
    100% { opacity: 1; }
}

И только в начальный/конечный момент применяется top, заданный непосредственно шарику (280px). Вот и получается, что между 91% и 100% он, плавно проявляясь из прозрачности, меняет top с 480 на 280px — «выпрыгивает снизу». А к отметке 33% опять туда опускается.

P.S. Зачем никому не нужные -moz-animation-* и особенно -ms-animation-*, и где, где стандартный беспрефиксный animation-*?

[borus]

Спасибо, дорогой Селеныч. Это шаблон 2012-13 гг похоже, видимо поэтому префиксы. Я просто довожу его до нужного состояния без полной ревизии.

Пчелы видно подобным же образом лечатся

Edited April 18, 2016 by borus

[SelenIT]

Вот с пчелами «скачков» не заметил (возможно, от размера экрана зависит?), но, полагаю, да...

Кстати, вообще желательно по возможности уходить от анимации top/left и т.п., а вместо них анимировать transform: translate*. Должно быть и плавнее (никаких reflow/repaint, только перекомпозиция слоев), и проще в управлении (не будет вот такого конфликта координат). Но да, в сочетании с другими трансформациями это может быть не так просто...