@charset "utf-8";

/* 全体
------------------------------------- */
.animation_area {
	border: solid 1px #ddd;
	background: #ddd;
	padding: 20px;
	margin: 20px auto;
}


/* 徐々に表示
------------------------------------- */
.opacityFadeIn {
    animation: opacityFadeIn 2s ease 0s 1 normal;
}

@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* アニメーション下から上
------------------------------------- */
.fadeIn {
animation: fadeIn 0.7s ease 0s 1 normal;
}
/* fadeIn */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}


/* アニメーション左から右
------------------------------------- */
.fadeInLeft {
	animation: fadeInLeft 0.7s ease 0s 1 normal;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
  }
}


/* アニメーション右から左
------------------------------------- */
.fadeInRight {
    animation: fadeInRight 0.7s ease 0s 1 normal;
}
/* fadeInRight */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
  }
}

/* アニメーションズーム
------------------------------------- */
.zoomIn {
    animation: zoomIn 1.0s ease 0s 1 normal;
}
/* zoomIn */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, .3, 0.3)
    }
    50% {
        opacity: 1
    }
}



/* 
------------------------------------- */
/* 
------------------------------------- */