Wordpressのアニメーション

前提・実現したいこと

wordpressのサイトにて、ロゴに動きをつけたいと考えております。
背景の地球は動かさずに、手前の動物だけにアニメーションを付けたいです。
背景の地球に「relative」, 　手前の動物に「absolute」を付与し、
ショートコードを埋め込むことによってアニメーションを実現しようとしましたが、
imgタグにうまくcssが効かず、実現しませんでした。

私の技術では、現状こちらが限界なのですが、
これからの手立てやその他の良い方法についてアドバイス頂けますと幸いです。

発生している問題・エラーメッセージ

写真が表示されず、要素の位置も思い通りにならない。

該当のソースコード

<div id="indexTtlWrapW">
<div id="indexTtlWrap">
<div class="pageKv earth">
	<img src="<?php echo get_template_directory_uri(); ?>/asset/img_cmn/logo-no.svg" alt="">
	<div class="rabbit">
	<?php
  		$scInnerText = '<img src="<?php echo get_template_directory_uri(); ?>/asset/img_cmn/rabbit.svg">';
  		echo do_shortcode('[su_animate type="bounceInDown"]' . $scInnerText . '[/su_animate]');
	?>
	</div>
</div>
</div>
</div>

css
1.earth {
2	position: relative;
3	height: 20px;
4}
5.rabbit {
6	display: flex;
7	justify-content: center;
8	align-content: center;
9	position: absolute;
10
11	top: 60%;
12	left: 0;
13	right: 0;
14	margin: auto;
15}