@charset "UTF-8";
/* CSS Document */

.yuni > img {
    opacity: 1;
    display: block;



    /*二枚の画像を同じ場所に重ねておく*/
    position: absolute;
    top: 0;
    left: 0;
}

/* それぞれの画像にanimationを付与*/
#yuni01 .img1,#yuni03 .img1{
    animation: 5s linear infinite rotation1;
}
#yuni01 .img2,#yuni03 .img2{
    animation: 5s linear infinite rotation2;
}
#yuni02 .img1,#yuni04 .img1{
    animation: 5s linear infinite rotation1 3s;
}
#yuni02 .img2,#yuni04 .img2{
    animation: 5s linear infinite rotation2 3s;
}

/*画像１を後半の秒数のみY軸を回転させながら表示*/
@keyframes rotation1{
    0%{
			
        opacity: 0;
    }50%{
			
        opacity: 0;
    }51%{
        transform:rotateY(90deg); 
        opacity: 1;
		 }55%{
        transform:rotateY(0deg); 
        opacity: 1;
			}95%{
        transform:rotateY(0deg); 
        opacity: 1;
    }100%{
        transform:rotateY(-90deg);
        opacity: 1;
    }
}

/*画像２を前半の秒数のみY軸を回転させながら表示*/
@keyframes rotation2{
    0%{
        transform:rotateY(-90deg);
        opacity: 1;
		}5%{
        transform:rotateY(0deg); 
        opacity: 1;
		}45%{
        transform:rotateY(0deg); 
        opacity: 1;
    }50%{
        transform:rotateY(90deg); 
        opacity: 1;
    }51%{
        opacity: 0;
			
    }100%{
        opacity: 0;
    }
}