/* Common utility */
.animated {
  animation-duration: 0.7s; /* brief */
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* Entering from top */
@keyframes enter-top {
  from { 
    opacity: 0; 
    transform: translateY(-20%); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
.enter-top { animation-name: enter-top; }

@keyframes enter-top_setting {
  from { 
    opacity: 1; 
    transform: translateY(0%); 
  }
  to { 
    opacity: 0; 
    transform: translateY(20%); 
  }
}
.enter-top_setting { animation-name: enter-top_setting;animation-duration: .4s; }

/* Entering from bottom */
@keyframes enter-bottom {
  from { 
    opacity: 0; 
    transform: translateY(20%); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
.enter-bottom { animation-name: enter-bottom; }

@keyframes enter-bottom_setting {
  from { 
    opacity: 0; 
    transform: translateY(20%); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
.enter-bottom_setting { animation-name: enter-bottom_setting;animation-duration: .4s; }

/* Entering from left */
@keyframes enter-left {
  from { 
    opacity: 0; 
    transform: translateX(-20%); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}
.enter-left { animation-name: enter-left; }

/* Entering from right */
@keyframes enter-right {
  from { 
    opacity: 0; 
    transform: translateX(20%); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}
.enter-right { animation-name: enter-right; }

/* Scale up (zoom in) */
@keyframes scale-up {
  from { 
    opacity: 0; 
    transform: scale(0.5); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}
.scale-up { animation-name: scale-up; }

.opacity-change
{
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-name: opac;
}
@keyframes opac {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}