.meter-1 {
  stroke-dasharray: 520;
  stroke-dashoffset: 0;
  animation: progress-1 2s ease-out;
}

@keyframes progress-1 {
    from {
        stroke-dashoffset: 520;
    }
    to {
        stroke-dashoffset: 0;
    }
}



.arrow-2 {
  width:15px;
  height:0px;
  animation: mymove 5s ease-out;
}
  
}
@keyframes mymove	 {
  from {height: 0px;}
  to {height: 32px;}
}

.circle-2 {
  width:68px;
  height:0px;
  animation: mycircle 2s ease-out;
}
  
}
@keyframes mycircle	 {
  from {width: 0px;}
  to {width: 68px;}
}

.reveal{
  position: relative;
  display:none;
}

.revealdown{
  position: relative;
  opacity: 1;
  transition: 1s all ease;
}
.reveal.active,.revealdown.active{
  display:block;
}

.revealleft{
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: 1s all ease;
}
.revealright{
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease;
}
.revealleft.active,.revealright.active{
  transform: translateX(0);
  opacity: 1;
}

.one{transition: 1.3s all ease;}
.two{transition: 1.5s all ease;}
.three{transition:1.8s all ease;}
.reveal.active,.revealdown.active{
  transform: translateY(0);
  opacity: 1;
}

.object2 {
  animation: MoveLeftRight 1s linear infinite;
  position: relative;
}

@keyframes MoveLeftRight {
  0%, 100% {
    left: 0;
  }
  50% {
    left:10px;
  }
}


.object3 {
  animation: MoveRightLeft 1s linear infinite;
  position: relative;
}

@keyframes MoveRightLeft {
  0%, 100% {
    right: 0;
  }
  50% {
    right:10px;
  }
}