/*
.box {
 padding: 1em 2em;
  margin: 0 .5em;
  background: #ddd;
    
    
  will-change: transform;
}


.box::before {
  content: attr(data-timing);
}

*/

.easeBox {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    will-change: tanslateY;
}

.easeBox_up {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    will-change: tanslateY;
}

.easeBox_up_2 {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    will-change: tanslateY;
}

.easeBox_down {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    will-change: tanslateY;
}


.easeBox_down2 {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    will-change: tanslateY;
}

.easeBox_slide_left {
    -webkit-transform: translateX(var(--tx));
    transform: translateX(var(--tx));
    opacity: var(--o);
    will-change: tanslateX;
}

.easeBox_slide_right {
    -webkit-transform: translateX(var(--tx));
    transform: translateX(var(--tx));
    opacity: var(--o);
    will-change: tanslateX;
}

.easeBox_slide_bottom {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    opacity: var(--o);
    will-change: tanslateY;
}

.easeBox_fade_in {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    opacity: var(--o);
    will-change: tanslateX;
}

.easeBox_fade_out {
    -webkit-transform: translateY(var(--ty));
    transform: translateY(var(--ty));
    opacity: var(--o);
    will-change: tanslateX;
}


/*
.rotateBox {
  -webkit-transform: rotate(var(--r));
          transform: rotate(var(--r));
}

.fadeBox {
  opacity: var(--o);
}
*/