css 複数のbackground-imageを設定している要素に個別＠keyframesをしたい

Question

よろしくお願いします

下記のようなcssを設定して

.hoge_bg{
 background:
			url(../img/hoge/bg_dec01.jpg) no-repeat -80px -40px,
			url(../img/hoge/bg_dec02.jpg) no-repeat 230px -31px
		;
}

この要素に

@keyframes bg_move01{
	0%{background-position:-80px 40px;}
	50%{background-position:-200px 40px;}
	100%{background-position:-80px 400px;}
}
@keyframes bg_move02{
	0%{background-position:-180px 40px;}
	50%{background-position:-300px 44px;}
	100%{background-position:-10px 60px;}
}
.hoge_bg{
	animation:bg_move01 8s ease-in-out infinite;
}

「.hoge_bg」に設定している複数のbackground-imageに個別のアニメーションを指定したいのですが、
方法はありますでしょうか？

Answer 1

@keyframes bg_move01{
    0%{background-position:-80px 40px, -180px 40px;}
    50%{background-position:-200px 40px, -300px 44px;}
    100%{background-position:-80px 400px, -10px 60px;}
}
.hoge_bg{
    animation:bg_move01 8s ease-in-out infinite;
}

カンマ区切りで2枚目のbgの位置も指定してやればOKです。