CSS3 Animation - Map Points and Journeys

by Farzad Cyrus

HTML

<!-- MAP BACKGROUND -->
        <div class="animation animation-map">
            <div class="animation-container">
                <!-- ITEM 1 -->
                <div class="animation-item-1">
                    <div class="animation-map-marker-1 animation-map-marker-start">
                        <em class="animation-map-icon icon"><i class="fi-location4"></i></em>
                        <div class="animation-map-location"></div>
                    </div>
                    <!-- JOURNEY -->
                    <div class="animation-map-journey-1 animation-map-journey-top-right"><span></span></div>
                    <div class="animation-map-journey-2 animation-map-journey-bottom-left"><span></span></div>
                    <div class="animation-map-journey-3 animation-map-journey-bottom-right"><span></span></div>
                    <div class="animation-map-journey-4 animation-map-journey-top-right"><span></span></div>
                    <div class="animation-map-journey-5 animation-map-journey-bottom-left"><span></span></div>
                    <!-- /JOURNEY -->
                    <div class="animation-map-marker-2 animation-map-marker-end">
                        <em class="animation-map-icon icon"><i class="fi-location4"></i></em>
                        <div class="animation-map-location"></div>
                    </div>
                </div>
                <!-- ITEM 2 -->
                <div class="animation-item-2">
                    <div class="animation-map-marker-1 animation-map-marker-start">
                        <em class="animation-map-icon icon"><i class="fi-location4"></i></em>
                        <div class="animation-map-location"></div>
                    </div>
                    <!-- JOURNEY -->
                    <div class="animation-map-journey-1 animation-map-journey-top-left"><span></span></div>
                    <div class="animation-map-journey-2 animation-map-journey-bottom-left"><span></span></div>
   ...

CSS

.animation-map {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    padding: 48px;
    margin: 0;
}

.animation-map .animation-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.animation-map [class^="animation-item"] {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
}



@keyframes animation-map-marker {
    0% { opacity: 0;  }
    25% {opacity: 0;}
    30% { opacity: 1;  }
    75% {opacity: 0;}
    100%{ opacity: 0;  }
}
.animation-map [class^="animation-map-marker"] {
    width: 48px;
    height: 48px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2;
    opacity: 0;
    -webkit-animation: animation-map-marker 4s normal 0s infinite;
    animation: animation-map-marker 4s normal 0s infinite;
}
.animation-map .animation-map-marker-end {
    animation-delay: 1.2s;
}

@keyframes animation-map-icon {
    0% { opacity: 0; transform: rotateX(180deg); }
    50% { opacity: 1; transform: rotateX(-30deg); }
    100%{ opacity: 0; transform: rotateX(0deg); }
}
.animation-map .animation-map-icon {
    position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	color: #d7c9c7;
    color: #dd1133;
	font-size: 32px;
	line-height: 32px;
	margin: -32px 0 0 -16px;
	z-index: 1;
    
}
.animation-map .animation-map-marker-start .animation-map-icon {color: #1a9;}

.animation-map .animation-map-location {
    width: 20px;
	height: 20px;
	
	border-radius: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    background: rgba(0, 0, 0, 0.2);
}
.animation-map .animation-map-location:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 0;
    background-color: #ffffff;
    border-radius: 100%;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
}

.animation-map [class^="animation-map-journey"] {
    position: absolute;
	width:...