Adding functions in CSS (CSS4?)

Hi css team,
What is lacking the most in CSS is the ability to do some "easy" animations with CSS. Instead we need to use complex JavaScript to make something. I found some great stuffs yesterday made with SCSS : http://sass-lang.com/guide It's a kind of better CSS, but because it's not supported by browser, it's a bit useless, but I'm sure that it could be really great to have a new CSS4 with that.
I really like the fact that instead of writingSyntaxnav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
Sass Syntaxnav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none


You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this:
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
We should also be able to put variable and some function inside CSS.It could allow us to make easy animation or drop down menu.
New events :
:onclick Add the possibility to change or animate something when you click on the class or id.:onpageload Instead of using complexe javascript to make text appear on the page. Could also be a possibility to add a loading screen?:pageload:X s Could allow to start an animation X seconds after the page loaded:offscreen What happen when item is offscreen?:onscreen What happen when item is onscreen? Could allow to make text appear/disappear if it's offscreen or onscreen or make something move.
:Scrolldown Could be great if you want something appear or disappear on scrolldown only:Scrollup Could be great for navbar if you want it appear fixed only when you scroll up.:position-top:Xpx : Could be great if you want something appear after you scroll down X pixels from top. Maybe fixed menu after scrolling 100vh or 200px?
New tags :
<spoiler></spoiler>All the text inside the spoiler tag will be hidden behind a black box (default), but can be modified with new CSS.spoiler {spoiler-color: The color of the block. Possibility to add blurry box to make the hidden text blurry with blur(0 to 1);border-radius : To change the radius of the extremities.boder : possibility to add a border to the spoiler block.}spoiler:hover { Show hidden text when you are hover the spoiler tag. Hide the text again when not hover.background-color :color :font-style:}spoiler:onclick { Show hidden text when you click on spoiler tag.background-color :color :font-style:}