Diploma/css/styleGlobalMap.css

.global-map {
    stroke: black;
    stroke-width: 3px;
    fill: none;
}
.southAmerica{
    stroke-dasharray: 990;
    -webkit-animation: southAmerica 3s linear forwards;
    fill: black;
    fill-opacity: 0;
}
@-webkit-keyframes southAmerica {
    0%{
        stroke-dashoffset: 977;
    } 50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    } 100% {
        fill-opacity: 1;
    }
}
.northAmerica{
    stroke-dasharray: 2117;
    -webkit-animation: northAmerica 3s linear forwards;
    fill: black;
    fill-opacity: 0; 
}
@-webkit-keyframes northAmerica {
    0%{
        stroke-dashoffset: 2112;
    } 50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    } 100% {
        fill-opacity: 1;
    }
}
.africa{
    stroke-dasharray: 1079;
    -webkit-animation: africa 3s linear forwards;
    fill: black;
    fill-opacity: 0; 
}
@-webkit-keyframes africa {
    0%{
        stroke-dashoffset: 1079;
    } 50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    } 100% {
        fill-opacity: 1;
    }
}
.europa{
    stroke-dasharray: 1438;
    -webkit-animation: europa 3s linear forwards;
    fill: black;
    fill-opacity: 0; 
}
@-webkit-keyframes europa {
    0%{
        stroke-dashoffset: 1432;
    } 50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    } 100% {
        fill-opacity: 1;
    }
}
.asia{
    stroke-dasharray: 3350;
    -webkit-animation: asia 3s linear forwards;
    fill: black;
    fill-opacity: 0; 
}
@-webkit-keyframes asia {
    0%{
        stroke-dashoffset: 3350;
    } 50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    } 100% {
        fill-opacity: 1;
    }
}
.australia{
    stroke-dasharray: 650;
    -webkit-animation: australia 3s linear forwards;
    fill: black;
    fill-opacity: 0; 
}
@-webkit-keyframes australia {
    0% {
        stroke-dashoffset: 650;
    } 50% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    } 100% {
        fill-opacity: 1;
    }
}