:root {
  --animation-delay: 0s; /* デフォルト値 */
  --animation-name: noDefind
}

.fadeInTitle {
animation-name: fadeInAnime;
animation-fill-mode:forward;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}

.moveLogo{
animation-name: var(--animation-name);
animation-delay:var(--animation-delay);
animation-fill-mode:both;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-direction:normal;
}
.moveLogoUD{
animation-name: moveLogoAnimeUD;
animation-delay:var(--animation-delay);
animation-fill-mode:both;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-direction:normal;
}


.fadeInContents {
animation-name: fadeInAnime,slideInUP;
animation-fill-mode:forward;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}


.skill-list-animation div.skill-item:nth-child(even){
animation-name: slideInRtoL;
animation-fill-mode:forward;
animation-duration:2s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}

.skill-list-animation div.skill-item:nth-child(odd){
animation-name: slideInLtoR;
animation-fill-mode:forward;
animation-duration:2s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}


@keyframes moveLogoAnimeLR {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes moveLogoAnimeUD {
  0% {
    transform: translateY(-60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes moveLogoAnimeRL {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes moveLogoAnimeDU {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInRtoL {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInLtoR {
  0% {
    transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInUP {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}


@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}