CSS only animated arrow

by spored3v

HTML

<!DOCTYPE html>
<head>
	<title>Test</title>
	<style>

	</style>
</head>
<body>
	<a href="https://sporedev.ro" target="_blank"><div href="#" class="arrow arrow-right active animate-right-to-left" style="margin-top:50px; margin-left: 250px;"><span class="room-desc">Library</span></div></a>	
	
	<img src="http://via.placeholder.com/550x250">
</body>

CSS

body{
	background-color: #000;
	margin: 5%;
	}
	.arrow {
	  position: absolute;
	  font-size: 16px;
	  max-width: 150px;
	  background: #FFF;
	  height: 60px;
	  line-height: 60px;
	  margin-bottom: 30px;
	  text-align: center;
	  color: white;
	  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
	  visibility: visible;
	  opacity: 0;
	  transition: visibility 0s, opacity 0.3s ease-in-out;
	}

	.arrow.active {
	  visibility: visible;
	  opacity: 1;
	}

	.arrow.active.animate-right-to-left {
	  animation-name: move-right-to-left;
	  animation-duration: 1s;
	  animation-delay: 0.6s;
	  animation-iteration-count: infinite;
	  animation-direction: alternative;
	}

	@keyframes move-right-to-left {
	  0% {
		transform: translateX(-5%);
		box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
	  }
	  50% {
		transform: translateX(-15%);
		box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
	  }
	  100% {
		transform: translateX(-5%);
		box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
	  }
	}

	/*right arrow*/

	.arrow-right {
	  border-radius: 5px 0px 0 5px;
	  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
	}

	.arrow-right:after {
	  content: "";
	  position: absolute;
	  right: -30px;
	  top: 0;
	  border-top: 30px solid transparent;
	  border-bottom: 30px solid transparent;
	  border-left: 30px solid #FFF;
	  opacity: 0.7;
	}

	.arrow-right:before {
	  content: "";
	  position: absolute;
	  left: -30px;
	  top: 0;
	  border-top: 0px solid transparent;
	  border-bottom: 60px solid transparent;
	  border-right: 32px solid #FFF;
	  opacity: 1;
	}


	.room-desc {
	  color: #122f69;
	  font-size: 20px;
	  font-weight: 400;
	  text-transform: uppercase;
	  letter-spacing: 2px;
	}