Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
<div id="stage-container">
<div id="AN-sObj-stage"><div id="AN-sObj-1" class="AN-Object"><span id="AN-sObj-val-1"></span></div><div id="AN-sObj-2" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-0; -webkit-animation-duration: 3.03s; "><span id="AN-sObj-val-2">Ionic Bonding Animation</span></div><div id="AN-sObj-3" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-1; -webkit-animation-duration: 6.81s; "><span id="AN-sObj-val-3">A Sodium Atom Must <b><u>Lose</u></b> One Electron To Reach A Stable State</span></div><div id="AN-sObj-4" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-2; -webkit-animation-duration: 10.33s; "><span id="AN-sObj-val-4">A Chlorine Atom Must <b><u>Gain</u></b> One Electron To Reach A Stable State</span></div><div id="AN-sObj-5" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-3; -webkit-animation-duration: 14.41s; "><span id="AN-sObj-val-5">When Chlorine and Sodium Collide With Sufficient Force</span></div><div id="AN-sObj-6" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-4; -webkit-animation-duration: 20.83s; "><span id="AN-sObj-val-6">The Sodium Atom Donates Its Electron To The Chlorine Atom</span></div><div id="AN-sObj-7" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-5; -webkit-animation-duration: 24.7s; "><span id="AN-sObj-val-7">The Sodium Atom Gains a Positive Charge</span></div><div id="AN-sObj-8" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-6; -webkit-animation-duration: 27.62s; "><span id="AN-sObj-val-8">The Chlorine Atom Gains a Negative Charge</span></div><div id="AN-sObj-9" class="AN-Object" style="opacity: 1; -webkit-animation-name: AN-ani-7; -webkit-animation-duration: 29.59s; "><span id="AN-sObj-val-9">Forming an Electro-Static Bond</span></div><div id="AN-sObj-10" class="AN-Object" style="-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; -webkit-animation-name: AN-ani-8; -webkit-animation-duration: 29.5905s; "><span id="AN-sObj-val-10"></span></div><div id="AN-sObj-11" class="AN-Object" style="-webkit-transform: translate3d(142px, 19px, 0px); -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-9; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-11">Na</span></div><div id="AN-sObj-12" class="AN-Object" style="-webkit-transform: translate3d(-190px, 19px, 0px); -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-10; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-12">Cl</span></div><div id="AN-sObj-13" class="AN-Object" style="-webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; -webkit-animation-name: AN-ani-11; -webkit-animation-duration: 21.94s; "><span id="AN-sObj-val-13"></span><div id="AN-sObj-24" class="AN-Object" style="-webkit-transform: translate3d(125px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(4300deg); -webkit-animation-name: AN-ani-12; -webkit-animation-duration: 23.75s; "><span id="AN-sObj-val-24"></span><div id="AN-sObj-25" class="AN-Object"><span id="AN-sObj-val-25"></span></div></div></div><div id="AN-sObj-26" class="AN-Object" style="-webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; -webkit-animation-name: AN-ani-13; -webkit-animation-duration: 21.94s; "><span id="AN-sObj-val-26"></span><div id="AN-sObj-27" class="AN-Object" style="-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(5760deg); -webkit-animation-name: AN-ani-14; -webkit-animation-duration: 27.21s; "><span id="AN-sObj-val-27"></span><div id="AN-sObj-28" class="AN-Object"><span id="AN-sObj-val-28"></span></div><div id="AN-sObj-29" class="AN-Object"><span id="AN-sObj-val-29"></span></div></div><div id="AN-sObj-30" class="AN-Object" style="-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(7840deg); -webkit-animation-name: AN-ani-15; -webkit-animation-duration: 28.51s; "><span id="AN-sObj-val-30"></span><div id="AN-sObj-31" class="AN-Object"><span id="AN-sObj-val-31"></span></div><div id="AN-sObj-32" class="AN-Object"><span id="AN-sObj-val-32"></span></div><div id="AN-sObj-33" class="AN-Object"><span id="AN-sObj-val-33"></span></div></div><div id="AN-sObj-34" class="AN-Object" style="-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(8300deg); -webkit-animation-name: AN-ani-16; -webkit-animation-duration: 25.84s; "><span id="AN-sObj-val-34"></span><div id="AN-sObj-35" class="AN-Object"><span id="AN-sObj-val-35"></span></div><div id="AN-sObj-36" class="AN-Object"><span id="AN-sObj-val-36"></span></div></div><div id="AN-sObj-37" class="AN-Object" style="-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3900deg); opacity: 0; -webkit-animation-name: AN-ani-17; -webkit-animation-duration: 16.79s; "><span id="AN-sObj-val-37"></span><div id="AN-sObj-38" class="AN-Object"><span id="AN-sObj-val-38"></span></div></div></div><div id="AN-sObj-39" class="AN-Object" style="-webkit-transform: translate3d(-20px, 0px, 0px); opacity: 1; -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-18; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-39">-</span></div><div id="AN-sObj-40" class="AN-Object" style="-webkit-transform: translate3d(20px, 0px, 0px); opacity: 1; -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-19; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-40">+</span></div></div>
</div>чем этот упакованный в целях оптимизации размера html-код отличается от обфусцированного с той же целью jsРовно тем, что JS это язык программирования, а HTML — язык разметки данных. Хотите анимировать — возьмите логичную разметку и примените к ней стили.
Различия между языком программирования и языком разметки в данном конкретном случае не имеют никакого значения, так как они решают одну и ту же задачу.Ну, ок — давайте все программировать на HTML. Как там…
<u><i><font><tt>Однако использование html для этой цели вы почему-то считаете противоестественным.Абсолютно верно. HTML это язык разметки гипертекста, а CSS это язык для оформления этой разметки. Сделайте нормальный код. Вот Яндексу не влом писать более-менее нормальный абсолютно независимый и неломаемый код без визуальных атрибутов.
-webkit, -moz, -o, -ms… что ещё?Вот только не надо передергивать. Я ничего подобного не имел в виду, и такой способ ведения дискуссии вас нисколько не красит.А как мне ещё отвечать на реплику, что HTML и Javascript суть одно и то же? Есть конкретные технологии для конкретных задач. А смешать мерло, шато и анапу в одно ведро и сказать, что «всё нормально» — это как-то слишком.
Ещё вопрос: почему Dreamweaver (бог среди визивигов) до сих пор не используется профессионалами.Безотносительно дискуссии насчёт Сенча-аниматора скажу, что я очень неплохо использую Дримвейвер со 2-й версии. Использую его, как редактор кода. Включаю панель с предпросмотром для более удобной навигации по коду — щёлк в какой-то серенький квадратик, и ты уже там, можно редактировать код.
<animate>, которые отвечают не за данные, а за отображение. Так что к нему никаких претензий.Цена будет такая же как и на обычные инструменты дизайна — от 100 долларов.

Sencha Animator — средство для создания анимации средствами CSS и HTML