
<!--下から上にフェイドイン-->
.animation {
margin:0;
color: #000000;

}

hide{
opacity:0;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(60px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(40％); -ms-transform:
translateY(40%); transform: translateY(40%); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform:
translateY(0); transform: translateY(0); }
}

.item{
  float: left;
  margin-right: 0px;
  padding: 0px;

  color: #000;
  list-style: none;
  text-align: center;
  line-height: 60px;
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 2s ease 0.3s 1 forwards;
}
.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 2s ease 0.6s 1 forwards;
}
.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 2s ease 0.9s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 2.0s 1 forwards;
  animation: example 2s ease 1.2s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 2s ease 1.5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 3.0s 1 forwards;
  animation: example 2s ease 1.8s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}





<!--左から右にフェイドイン-->
.animation1 {
margin:0;
color: #000000;
}

hide{
opacity:0;
}

.fadeInDown1 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown1;
 animation-name: fadeInDown1;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown1 {
 0% { opacity: 0; -webkit-transform: translateX(60px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInDown1 {
 0% { opacity: 0; -webkit-transform: translateX(-60％); -ms-transform:
translateX(-60%); transform: translateX(-60%); }
 100% { opacity: 1; -webkit-transform: translateX(0%); -ms-transform:
translateX(0%); transform: translateX(0%); }
}

.item{
  float: left;
  margin-right: 0px;
  padding: 0px;

  color: #000;
  list-style: none;
  text-align: center;
  line-height: 60px;
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 2s ease 0.3s 1 forwards;
}
.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 2s ease 0.6s 1 forwards;
}
.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 2s ease 0.9s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 2.0s 1 forwards;
  animation: example 2s ease 1.2s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 2s ease 1.5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 3.0s 1 forwards;
  animation: example 2s ease 1.8s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}


<!--右から左にフェイドイン-->
.animation2 {
margin:0;
color: #000000;
}

hide{
opacity:0;
}

.fadeInDown2 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown2;
 animation-name: fadeInDown2;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown2 {
 0% { opacity: 0; -webkit-transform: translateX(60px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInDown2 {
 0% { opacity: 0; -webkit-transform: translateX(60％); -ms-transform:
translateX(60%); transform: translateX(60%); }
 100% { opacity: 1; -webkit-transform: translateX(0%); -ms-transform:
translateX(0%); transform: translateX(0%); }
}

.item{
  float: left;
  margin-right: 0px;
  padding: 0px;

  color: #000;
  list-style: none;
  text-align: center;
  line-height: 60px;
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 2s ease 0.3s 1 forwards;
}
.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 2s ease 0.6s 1 forwards;
}
.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 2s ease 0.9s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 2.0s 1 forwards;
  animation: example 2s ease 1.2s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 2s ease 1.5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 3.0s 1 forwards;
  animation: example 2s ease 1.8s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}


<!--フェイドイン-->
.animation3 {
margin:0;
color: #000000;
opacity:0;
}

hide{
opacity:0;
}

.fadeInDown3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown3;
 animation-name: fadeInDown3;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown3 {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeInDown3 {
 0% { opacity: 0;}
 100% { opacity: 1;}
}

.item{
  float: left;
  margin-right: 0px;
  padding: 0px;

  color: #000;
  list-style: none;
  text-align: center;
  line-height: 60px;
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 2s ease 0.3s 1 forwards;
}
.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 2s ease 0.6s 1 forwards;
}
.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 2s ease 0.9s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 2.0s 1 forwards;
  animation: example 2s ease 1.2s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 2s ease 1.5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 3.0s 1 forwards;
  animation: example 2s ease 1.8s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}