CSS animasyon yapımı

Merhaba arkadaşlar

Şu adresteki gibi bir animasyonu nasıl yapabiliriz.

http://demokontrol.com/037/kontrolp/login.php

sabit bi arkaplan uzerinde 3 ayri gorsel var orada.

<div class="sky">
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>

.clouds_one

[LIST=1][*]background: url(images/cloud2.png) repeat-x;[*]    position: absolute;[*]    left: 0;[*]    top: 0;[*]    height: 100%;[*]    width: 300%;[*]    -webkit-animation: cloud_one 160s linear infinite;[*]    -moz-animation: cloud_one 160s linear infinite;[*]    -o-animation: cloud_one 160s linear infinite;[*]    -webkit-transform: translate3d(0, 0, 0);[*]    -moz-transform: translate3d(0, 0, 0);[*]    -o-transform: translate3d(0, 0, 0);[/LIST]

.clouds_two

[LIST=1][*]background: url(images/cloud_two.png)repeat-x;[*]    position: absolute;[*]    z-index: 100;[*]    left: 0;[*]    top: 0;[*]    height: 100%;[*]    width: 300%;[*]    -webkit-animation: cloud_two 160s linear infinite;[*]    -moz-animation: cloud_two 160s linear infinite;[*]    -o-animation: cloud_two 160s linear infinite;[*]    -webkit-transform: translate3d(0, 30px, 200px);[*]    -moz-transform: translate3d(0, 30px, 200px);[*]    -o-transform: translate3d(0, 30px, 200px);[/LIST]

.clouds_three

[LIST=1][*]background: url(images/cloud_three.png)repeat-x;[*] position: absolute;[*] left: 0;[*] top: 0;[*] height: 100%;[*] width: 300%;[*] -webkit-animation: cloud_three 210s linear infinite;[*] -moz-animation: cloud_three 210s linear infinite;[*] -o-animation: cloud_three 210s linear infinite;[*] -webkit-transform: translate3d(0, 0, 0);[*] -moz-transform: translate3d(0, 0, 0);[*] -o-transform: translate3d(0, 0, 0);[/LIST]

https://codepen.io/shshaw/pen/DxJka benzer bi animasyon

Bu yazdığınız kodlar yetiyor mu? Bu kodları sayfaya koysak, resimleri de yerleştirsek tamam mıdır?