CSS ignorowanie animacji przy załadowaniu strony

Dla specjalistów Webmastering
#1

cześć, mam problem z animacją, przykład:

https://jsfiddle.net/t31xyeoh/2/

animacja sama w sobie jest ok, jedyny problem jest taki, że ona sie uruchamia też przy załadowaniu strony a zależy mi jedynie, żeby była po wywołaniu tego onclicka na buttonie.

Druga sprawa, czy w tych zakresach w @keyframes muszę podawać statyczne wartości, typu 300 i 500px skoro to mam zdefiniowane w klasach wyżej? Zależy mi, żeby tego nie robić bo te wartości są różne dla różnych rozdzielczości.

Próbowałem w css z :active, ale to działa tylko dla aktywnego elementu, a nim w tym wypadku jest parent tego buttona.

Dzięki za pomoc.

#2

Wydaje mi się, że problem leży w tym, że animacja a2 jest przypisana do czystej klasy zaraz po załadowaniu strony, którą przeglądarka musi wywołać. Spróbuj na klik dodać dwie klasy do diva - jedna big i jedna dla animacji a2. tak żeby po usunięciu klasy big, animacja a2 była zastosowana do tej drugiej (ale nie dla tych jak masz .cnt .res-cnt).