перетаскиваете в окно программы свои png
учтите у меня только в firefox показывает, в chrome и IE11 не показывает анимацию
документация в
Для просмотра ссылки Войди или Зарегистрируйся
В том то и суть, что apng - формат, который вроде как давно и при этом не получился востребованным... то то его chrome и не поддерживает по умолчанию, вроде есть плагины для хрома, но честно говоря, не вникал.
Тут еще кроме всего, google активно webp формат протаскивает, который поддерживает анимацию. Есть сравнения, картинок одних размеров с одной анимацией но разных форматов, можно погуглить что то вроде "gif vs apng vs webp". Но с webp тоже непросто, его только сам хром из коробки поддерживает.
Тут важно понимать, для чего, каких целей и какая анимация нужна. Если как в первом примере, просто изменение цветов у статической картинки, я бы однозначно использовал svg - эффекта можно добиться легко и быстро, только играя со стилями css. При этом получаете векторную графику со всеми плюсами, главный из которых максимальное качество при любом размере и при этом минимальный вес.
Например, та же девятка только в svg
Для просмотра ссылки Войди или Зарегистрируйся
весь файл максимум пару кб, против почти 90 малюсенького гифа что в посту № 1.
