PlataformaEducativa/css/arrows.css

.arrows-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 width: 100%;
}

.chevron-1 {
    width: 100%;
    text-align: center;
}
.chevron-2 {
    width: 100%;
    text-align: center;
}
.chevron-3 {
    width: 100%;
    text-align: center;
    transform: translateY(-100%);
}
.flecha{
    margin: 0;
    padding: 0;
    font-weight: bolder;
    font-size: 58px;
    transform: scaleX(2);
    color: rgb(1, 115, 182);
}

.topArrow{
    animation-name: topArrow;
	-webkit-animation-name: topArrow;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes topArrow {
	0% {
        transform: scale(0) translateY(0%);
        opacity: 0;
    }
    100%{
        transform: scale(1) translateY(50%);
        opacity: 1;
    }
}
.middleArrow{
    animation-name: middleArrow;
	-webkit-animation-name: middleArrow;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes middleArrow {
	0% {
        transform: translateY(-50%);
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}
.bottomArrow{
    animation-name: bottomArrow;
	-webkit-animation-name: bottomArrow;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes bottomArrow {
	0% {
        transform: scale(1) translateY(-100%);
        opacity: 1;
    }
    100%{
        transform: scale(0) translateY(-50%);
        opacity: 0;
    }
}