/*---------------------------------------
pageHeader
----------------------------------------*/
.pageHeader__nav {
transition: 0.3s;
}
.pageHeader__nav.show {
right: 0;
}
.pageHeader__button::before,
.pageHeader__button::after {
transition: 0.3s transform, 0.1s 0.15s margin-top;
}
.pageHeader__button.show::before,
.pageHeader__button.show::after {
transition: 0.3s transform;
}
.pageHeader__button.show .pageHeader__buttonBar {
transition: 0.3s;
opacity: 0;
}
.pageHeader__button.show::before {
transform: translate(-50%, -50%) rotate(45deg);
margin-top: 0;
}
.pageHeader__button.show::after {
transform: translate(-50%, -50%) rotate(-45deg);
margin-top: 0;
}
/*---------------------------------------
intro
----------------------------------------*/
.intro__mv {
position: relative;
}
.intro__mv picture:nth-of-type(n+2){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
opacity: 0;
transition: 3s;
}
.intro__mv picture:nth-of-type(n+2).show {
opacity: 1;
}
.intro__copy {
z-index: 51;
}
/*---------------------------------------
feature
----------------------------------------*/
.feature__section {
opacity: 0;
transition: 1s;
}
.feature__section.show {
opacity: 1;
}
@media (max-width: 768px) {
.feature {
overflow-x: hidden;
}
.feature__section {
transform: translateX(25vw);
}
.feature__section:nth-of-type(even) {
transform: translateX(-25vw);
}
.feature__section.show {
transform: translateX(0);
}
}
@media (min-width: 769px) {
.feature__section {
transform: translateY(50px);
}
.feature__section.show {
transform: translateY(0);
}
}
/*---------------------------------------
course
----------------------------------------*/
.course__header {
transform: translateY(50px);
opacity: 0;
transition: 1s;
}
.course__header.show {
transform: translateY(0);
opacity: 1;
}
@media (max-width: 768px) {
.course__section {
transform: translateY(50px);
opacity: 0;
transition: 1s;
}
.course__section.show {
transform: translateY(0);
opacity: 1;
}
}
/*---------------------------------------
news
----------------------------------------*/
.news {
transform: translateY(50px);
opacity: 0;
transition: 1s;
}
.news.show {
transform: translateY(0);
opacity: 1;
}
.news__item {
transform: translateY(50px);
opacity: 0;
transition: 1s;
}
.news__item.show {
transform: translateY(0);
opacity: 1;
}
animation.css