Is it possible to keyframe-css animate a div counter-clockwise over pi?

Question:

Is it possible to animate the inner-circle .watch-face from 12 o'clock, counter clockwise, a full rotation or 2πr in only css keyframes?

Here would be the look of the completed animation:

COMPLETED ANIMATION:

Check out Live code starting point: Code sample

HTML:

<div class="watch-container">
  <div class="watch-face"></div>
</div>

SCSS

$watch-face-size: 165;
$watch-border-size: 185;

.watch-face {
  height: $watch-face-size + px;
  width: $watch-face-size + px;
  background: green;
  box-sizing: border-box;
  border-radius: $watch-face-size + px;
  position: relative;
  display: inline-block;

  &.animate-counter-clockwise {
    //How to write a keyframe animation to animate from
  }


  &::after {
    content: "10";
    position: absolute;
    font-size: 68px;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-weight: 400;
    letter-spacing: -3px;

  }

  &::before {
    position: absolute;
    content: " ";
    border: 5px solid green;
    background: transparent;
    border-radius: $watch-border-size + px;
    width: $watch-border-size + px;
    height: $watch-border-size + px;
    top: -10px;
    left: -10px;
  }
}

//boilerplate styles
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    -ms-box-sizing: inherit;
    -o-box-sizing: inherit;
    box-sizing: inherit;
}

.watch-container {
  width: 30%;
  margin: 50px auto;
  line-height: 22px;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}