If div height is larger than set viewport (vh), use different css?

Question

I had a different thread here which discussed the same thing, but with Javascript. What I want to achieve is that if a div called #vs becomes larger than a set vh (viewport) it should use different CSS (scrolling div).

Right now I am able to do this, but with Javascript, but I can only set the div > in pixels, if it exceeds this a CSS class called .vscroll is added to #vs.

The CSS looks like this:

#vs {
    clear: both;
    width: 90%;
    margin: 0 auto 0px;
    overflow: hidden;
    position: relative;
}

.vscroll {
    position: absolute;
    height: auto;
  /* Starting position */
  -moz-transform:translateY(100%);
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-up 25s linear infinite;
  -webkit-animation: scroll-up 25s linear infinite;
  animation: scroll-up 25s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-up {
  0%   { -moz-transform: translateY(100%); }
  100% { -moz-transform: translateY(-100%); }
 }
 @-webkit-keyframes scroll-up {
  0%   { -webkit-transform: translateY(100%); }
  100% { -webkit-transform: translateY(-100%); }
 }
 @keyframes scroll-up {
  0%   {
  -moz-transform: translateY(100%); /* Browser bug fix */
  -webkit-transform: translateY(100%); /* Browser bug fix */
  transform: translateY(100%);
  }
  100% {
  -moz-transform: translateY(-100%); /* Browser bug fix */
  -webkit-transform: translateY(-100%); /* Browser bug fix */
  transform: translateY(-100%);
  }
}

So is this possible to do with just CSS instead of Javascript? I got the tip in my other thread, but I don't know how to achieve it. Thank you!