/jsbin.cugokajo.css

## jsbin.cugokajo.css
body {
  background: #FFFFFF;
}

.box {
  width: 60px;
  height: 60px;
  border: 1px solid;
  margin: 250px auto 0;
  border-radius: 3px;
  border-color: #AAA;
  background: #AAA;
}

.caret {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #AAA;
  border-left: 0px solid transparent;
  position: relative;
  top: calc(50% - 6px);
  left: -9px;

  -webkit-animation: myfirst 1.25s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: paused;
}

.caret:hover {
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0% {
    top: calc(50% - 6px);
    left: -9px;

    -webkit-transform: rotate(0deg);
  }

  25% {
    top: calc(75% - 6px);
    left: -9px;

    -webkit-transform: rotate(0deg);
  }

  50% {
    top: 51px;
    left: -3px;

    -webkit-transform: rotate(-45deg);
  }

  75% {
    top: 57px;
    left: calc(25% - 6px);

    -webkit-transform: rotate(-90deg);
  }

  100% {
    top: 57px;
    left: calc(50% - 8px);

    -webkit-transform: rotate(-90deg);
  }
}

## jsbin.cugokajo.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
    <div class="caret"></div>
  </div>
</body>
</html>

## jsbin.cugokajo.js
$(document).on('ready', function() {
  $('.box').hover(
    function(event) {
      $(".caret").css({
        "-webkit-animation-play-state": "running"
      });
    },
    function(event) {
      $(".caret").css({
        "-webkit-animation-play-state": "paused"
      });
    }
  );
});
	body {
	background: #FFFFFF;
	}

	.box {
	width: 60px;
	height: 60px;
	border: 1px solid;
	margin: 250px auto 0;
	border-radius: 3px;
	border-color: #AAA;
	background: #AAA;
	}

	.caret {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid #AAA;
	border-left: 0px solid transparent;
	position: relative;
	top: calc(50% - 6px);
	left: -9px;

	-webkit-animation: myfirst 1.25s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: paused;
	}

	.caret:hover {
	}

	@-webkit-keyframes myfirst /* Safari and Chrome */
	{
	0% {
	top: calc(50% - 6px);
	left: -9px;

	-webkit-transform: rotate(0deg);
	}

	25% {
	top: calc(75% - 6px);
	left: -9px;

	-webkit-transform: rotate(0deg);
	}

	50% {
	top: 51px;
	left: -3px;

	-webkit-transform: rotate(-45deg);
	}

	75% {
	top: 57px;
	left: calc(25% - 6px);

	-webkit-transform: rotate(-90deg);
	}

	100% {
	top: 57px;
	left: calc(50% - 8px);

	-webkit-transform: rotate(-90deg);
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="box">
	<div class="caret"></div>
	</div>
	</body>
	</html>
	$(document).on('ready', function() {
	$('.box').hover(
	function(event) {
	$(".caret").css({
	"-webkit-animation-play-state": "running"
	});
	},
	function(event) {
	$(".caret").css({
	"-webkit-animation-play-state": "paused"
	});
	}
	);
	});