title: transition and target in css
body: <p>I'm working on creating a page with some CSS-animations (due to some of my customers dont want JavaScript heavy site). So I have one element I want to animate, but in 3 different ways based on which button is clicked:</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;a href="#element"&gt;One animation&lt;/a&gt;
  &lt;a href="#element"&gt;Second animation&lt;/a&gt;
  &lt;a href="#element"&gt;Third animation&lt;/a&gt;
  
  &lt;div id="element"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The way I select the element is with :target. But how can I animate the same element in three different ways using :target?</p>
  
  <p>This is the CSS I have by now for testing purposes:</p>
  
  <pre><code>#element{
  height: 10px;
  width: 10px;
  border-radius: 0px;
  background-color: red;
  position: absolute;
  left: 440px;
  top: 300px;
  -webkit-transition-property: height, width, background-color,;
  -webkit-transition-duration: 5s;
  -webkit-transition-timing-function:ease-out;
  }
  
  #element:target{
  height: 300px;
  width: 500px;
  border-radius: 0px;
  background-color: blue;
  position: absolute;
  left: 200px;
  top: 200px;
  }
  </code></pre>
  
  <p>So I basically want to have 3 different :target styles on the same element. Is this possible?</p>