PlataformaEducativa/css/animation-main.css

.streaming {
    width: 80%;
    height: 98%;
    /* top: 1%;
    left: 10%; */
    top: 19%;
    left: 2%;
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 2;
    opacity: 1;
}

.part1 {
    height: 40vh;
    width: 20%;
    position: absolute;
    opacity: 1;
    left: 31%;
    top: 0%;
    z-index: 3;
}

.part2 {
    width: 26%;
    height: 30vh;
    position: absolute;
    top: 29.5vh;
    left: 31.25%;
    opacity: 1;
    z-index: 3;
}

.part3 {
    width: 26%;
    height: 30vh;
    position: absolute;
    right: 29.5%;
    top: 0%;
    opacity: 1;
    z-index: 3;
}

.part4 {
    width: 20%;
    height: 40vh;
    position: absolute;
    right: 29%;
    top: 20vh;
    opacity: 1;
    z-index: 3;
}

.topLeft {
    animation-name: topLeft;
    -webkit-animation-name: topLeft;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
}

@keyframes topLeft {
    0% {
        transform: scale(0);
        opacity: 0;
        top: -20%;
        left: 0%;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes topLeft {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
        top: -20%;
        left: 0%;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

.topRight {
    animation-name: topRight;
    -webkit-animation-name: topRight;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
}

@keyframes topRight {
    0% {
        transform: scale(0);
        opacity: 0;
        top: -20%;
        right: 0%;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes topRight {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
        top: -20%;
        right: 0%;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

.bottomRight {
    animation-name: bottomRight;
    -webkit-animation-name: bottomRight;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
}

@keyframes bottomRight {
    0% {
        transform: scale(0);
        opacity: 0;
        top: 50%;
        right: 0%;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes bottomRight {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
        top: 50%;
        right: 0%;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

.bottomLeft {
    animation-name: bottomLeft;
    -webkit-animation-name: bottomLeft;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
}

@keyframes bottomLeft {
    0% {
        transform: scale(0);
        opacity: 0.5;
        top: 50%;
        left: 0%;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes bottomLeft {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.5;
        top: 50%;
        left: 0%;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

.goOut {
    animation-name: goOut;
    -webkit-animation-name: goOut;
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
}

@keyframes goOut {
    0% {
        transform: skewX(0deg) translateX(0px);
        opacity: 1;
    }
    100% {
        transform: skewX(20deg) translateX(2000px);
        opacity: 0;
    }
}

@-webkit-keyframes goOut {
    0% {
        -webkit-transform: skewX(0deg) translateX(0px);
        opacity: 1;
    }
    100% {
        -webkit-transform: skewX(20deg) translateX(2000px);
        opacity: 0;
    }
}

.streamVisible {
    animation-name: streamVisible;
    -webkit-animation-name: streamVisible;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}

@keyframes streamVisible {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform: scale(1.5) translateX(-100%);
    }
    75% {
        opacity: 0;
        transform: translateX(100%) scaleX(0.75);
    }
    80% {
        opacity: 0;
        transform: translateX(100%) scaleX(0.75);
    }
    85% {
        opacity: 1;
        transform: translateX(0%) scaleX(0.75);
    }
    86% {
        transform: translateX(0%) scaleY(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes streamVisible {
    0% {
        opacity: 0;
        filter: blur(5px);
        -webkit-transform: scale(1.5);
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

.fromLeft {
    animation-name: fromLeft;
    -webkit-animation-name: fromLeft;
    animation-duration: 7s;
    -webkit-animation-duration: 7s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
    visibility: visible !important;
}

@keyframes fromLeft {
    0% {
        opacity: 0;
        filter: blur(3px);
        transform: translateX(-100%);
    }
    75% {
        opacity: 0;
        transform: translateX(-100%);
    }
    78% {
        opacity: 1;
        transform: skewX(20deg) translateX(0%);
    }
    80% {
        transform: skewX(0deg) translateX(0%);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1) translateX(0%);
    }
}

@-webkit-keyframes fromLeft {
    0% {
        opacity: 0;
        filter: blur(3px);
        -webkit-transform: translateX(-100%);
    }
    75% {
        opacity: 0;
        filter: blur(3px);
        -webkit-transform: skewX(0deg) translateX(-100%);
    }
    78% {
        opacity: 1;
        -webkit-transform: skewX(20deg) translateX(0%);
    }
    80% {
        -webkit-transform: skewX(0deg) translateX(0%);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-transform: scale(1) translateX(0%);
    }
}