Q:

Animation duration set for minutes

I've been trying to find the answer here but can't. I am creating a clock in CSS and want the hour pointer set so the animation duration is set based on minutes or hours if that is possible. Is this something I can do or do I simply have to set the duration on seconds? 
here is a codepen

.spinner,
.wrapper .spinner1,
.wrapper .spinner2 {
  width: 100px;
  height: 100px;
  background: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 50px;
  display: inline-block;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.wrapper .spinner1:after,
.wrapper .spinner1:before {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  content: '';
  display: block;
}
.wrapper .spinner1:after {
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid transparent;
  border-top-color: #6787b7;
  border-bottom-color: #6787b7;
  animation: spinny 2s linear infinite;
}
.wrapper .spinner2 {
  border: 2px black solid;
}
.wrapper .spinner2:after {
  width: 2px;
  height: 50px;
  background: black;
  border-radius: 4px;
  position: absolute;
  top: 0%;
  left: 50%;
  content: '';
  display: block;
  margin-left: -1px;
  animation: time 60s linear infinite;
  transform-origin: bottom center;
}
.wrapper .spinner2:before {
  width: 4px;
  height: 25px;
  top: 25%;
  content: '';
  display: block;
  background: black;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  transform-origin: bottom center;
  animation: time 43200s linear infinite;
}
@keyframes spinny {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes time {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="wrapper">
  <div class="spinner1"></div>
  <div class="spinner2"></div>
</div>

A:

Use calc for this and you can simply write calc(60 * 60 * 12 * 1s)

.spinner,
.wrapper .spinner1,
.wrapper .spinner2 {
  width: 100px;
  height: 100px;
  background: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 50px;
  display: inline-block;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.wrapper .spinner1:after,
.wrapper .spinner1:before {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  content: '';
  display: block;
}
.wrapper .spinner1:after {
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid transparent;
  border-top-color: #6787b7;
  border-bottom-color: #6787b7;
  animation: spinny 2s linear infinite;
}
.wrapper .spinner2 {
  border: 2px black solid;
}
.wrapper .spinner2:after {
  width: 2px;
  height: 50px;
  background: black;
  border-radius: 4px;
  position: absolute;
  top: 0%;
  left: 50%;
  content: '';
  display: block;
  margin-left: -1px;
  animation: time calc(60 *1s) linear infinite;
  transform-origin: bottom center;
}
.wrapper .spinner2:before {
  width: 4px;
  height: 25px;
  top: 25%;
  content: '';
  display: block;
  background: black;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  transform-origin: bottom center;
  animation: time calc(60 * 60 * 12 * 1s) linear infinite;
}
@keyframes spinny {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes time {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="wrapper">
  <div class="spinner1"></div>
  <div class="spinner2"></div>
</div>

