鹿児島のフリーランスWebデザイナー＆Webエンジニア｜小田聖夏のブログ

５回目　①＋② 応用 / ページ読み込みで動く

波とイルカ

--[ html ]-----------------------

 <div id="hani">
    <span class="animation-nami"></span>
    <span class="iruka2"></span>
    </div>

--[ CSS ]------------------------
｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

#hani{
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#hani span {position:absolute;}

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}

.iruka2{ 
        background-image:url(images/iruka1.png) ;
	width:160px;
	height:160px;
        z-index:5;
        bottom:-110px;
 	-webkit-animation:irukamawaru2 6s linear infinite normal;
	animation:irukamawaru2 6s linear infinite normal;
}

@keyframes irukamawaru2{
	0%	{}
	100%	{transform: rotate(360deg);}
}