.box{
    width: 200px;
    height: 200px;
    background-color: rgb(244, 193, 126);

    /* transition-property:background-color transform; */
    /* transition-property: all;
    transition-duration: 5000ms; */
   /* transition-delay:3000ms;
} */
/* transition-timing-function:cubic-bezier(.85,-0.02,.01,.94); */


    transition: all 2s ease-in-out 2s;
}
.box:hover{
    width: 300px;
    background-color: blue;
    transform: scale(1.5)
}

/* .text{
    opacity: 0;
    transition: opacity 1s linear;
}

.text:hover{
    opacity: 1;
} */

.box2{
    width: 200px;
    height: 200px;
    outline: 1px solid black;

    position: relative;
    overflow: hidden;
    /* overflow: scroll; */
    /* overflow: auto; */
    /* overflow: visible; */
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    transition: transform 0.5s ease;

    /* transform: translateX(-100%); */
     /* transform: translateX(100%); */
      /* transform: translateY(-100%); */
       transform: translateY(100%);
}
h2{
 opacity: 1;
 /* transition: opacity 1s linear; */
}
.box2:hover .overlay{
    transform: translateY(0);
}
.box2:hover h2{
   /* opacity: 0; */
   display:none;
}


@keyframes changeBackground {
 0% {
   background-color:aqua;
 }

 40% {
    background-color:rgb(0, 255, 72);
 }

  80% {
   background-color:rgb(204, 255, 0);
 }
 100% {
    background-color:rgb(9, 22, 22);
 }
}

@keyframes changePosition {
 0% {
   transform: skew(0);
 }

  50% {
   transform: skew(10deg);
 }
 100% {
    transform: skew(0);
 }
}

/* .box3{
    width: 200px;
    height: 200px;
    outline: 1px solid black;

    animation: changeBackground 2s linear infinite running;
} */

/* .box3:hover{
    /* animation-name: changeBackground, changePosition;
    animation-duration: 2000ms;
    animation-timing-function: linear;
    animation-iteration-count:infinite;*/

    /* animation: changeBackground 2s linear infinite paused; */
/*} */
/* .box1{
    display:flex;

} */

@keyframes rotateX {
 0% {
   transform: rotateX(0);
 }

  100% {
   transform: rotateX(60deg);
 }

}

.box3{
    width: 200px;
    height: 200px;
    outline: 1px solid black;
    background-color: blue;

    animation: rotateX 2s linear infinite;
}

@keyframes rotateY {
 0% {
   transform: perspective(400px) rotate3d(1, 1, 1, 0);
 }

  100% {
   transform: perspective(400px) rotate3d(1, 1, 1, 360deg);
 }

}

.box4{
    width: 200px;
    height: 200px;
    outline: 1px solid black;
    background-color: rgb(0, 255, 76);
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.box4:hover{
    animation: rotateY 2s linear infinite;
}


.container{
    position: relative;

    width: 600px;
    height: 400px;
    outline: 1px solid black;
    background-color: rgb(0, 255, 76);
}

.box5{
    position: absolute;

    width: 150px;
    height: 100px;
    outline: 1px solid black;
    background-color: rgb(0, 38, 255);

    top:50%;
    left:50%;

    transform: translate(-50%, -50%);
}