Проблеми с css3 анимация (и решения)

@-webkit-keyframes pulsehtml5 {
0% {
opacity:1;
}
50% {
opacity:0.7;
}
100% {
opacity:1;
}
}
.animated-html5 {
/*-webkit-transition: 1s all linear;*/
-webkit-animation: pulsehtml5 2s ease-in-out infinite;
}
.animated-html5:hover {
/*opacity: 0.5;*/
}

Малко са хората, които са се докоснали до възможностите на css3 анимациите и не са се възхитили колко просто се използва тя и каква е производителността на устройствата, когато я изпълняват. Ръчкайки от известно време в тази материя се сблъсках с някои предполагам тъпи грешки, които няма как да не споделя.

Проблемът е в това, че въпреки добавянето на -webkit-transition в css-а, от анимация – ни вест ни кост.

Причините при мен бяха следните:

1. Опитвах се да анимирам скриването и показването на елементи чрез display:none; и display:block; По пътя но нормалната логика (неприсъща от време на време за мен) анимирането е просто постепенно променяне на някой css атрибут. Та следователно за да променим постепенно display атрибута какво трябва да се направи? Да премине през block; inline-block; inline; none? 🙂 Е нЕма логика и за това нЕма и анимация. Good point!
2. Опитвайки се да анимирам промяната в размера на един елемент, анимацията беше напълно cross-browser complient (демек изглеждаше еднакво добре и на IE6 и на Chrome… a.k.a. изобщо я нямаше). Отново след вкарване на малко количество логика и наблюдение се оказа, че се опитвам да анимирам от ширина 100% към ширина 200 пиксела. Е явно браузъра не обича да превръща от проценти в нещо друго. (Ако променяте от px в em подобен проблем няма)

+ И още един съвет при използването на css анимация – за да подобрите performance-а поставяйте началната стойност на атрибутът, който ще анимирате в inline стила на елемента. При webKit браузърите се забелязва очевидно подобрение на скоростта на първата анимация при първата анимация.