/***** フェードイン *****/
@keyframes fadeIn {
from {
opacity:0;
transition: all 0.5s ease;
}
to {
opacity:1;
transition: all 0.5s ease;
}
}
.fadeIn {
opacity:0;
}
.fadeIn.active {
animation:fadeIn 1s both;
}

/***** フェードイン ＆ スライドダウン *****/
@keyframes fadeInDown {
from {
opacity:0;
transform: translateY(-10px);
transition: all 0.5s ease;
}
to {
opacity:1;
transform: translateY(0);
transition: all 0.5s ease;
}
}
.fadeInDown {
opacity:0;
}
.fadeInDown.active {
animation:fadeInDown 1s both;
}

/***** ヘッダー黒帯 スライドイン *****/
@keyframes headerSlideIn {
from {
top:-65px;
transition: all 0.5s ease;
}
to {
top:0;
transition: all 0.5s ease;
}
}
.headerSlideIn {
top:-65px;
}
.headerSlideIn.active {
animation:headerSlideIn 1s both;
}

/***** 商品詳細ヘッダー 商品画像スライドイン *****/
@keyframes fadeInSliideRtoL {
from {
right:-10%;
opacity:0;
transition: all 0.5s ease;
}
to {
right:0;
opacity:1;
transition: all 0.5s ease;
}
}
.fadeInSliideRtoL {
right:-10%;
opacity:0;
}
.fadeInSliideRtoL.active {
animation:fadeInSliideRtoL 1s both;
}