css3 - Where should the CSS transition property go? -

when creating css transition element, should transition property applied element's existing class (or id or selector) or new class causes transition? works either way believe, 1 way better other , why?

jsfiddle

.box {      height: 100px;      width: 100px;      background: blue;  }    /* background-change class added element box class */  .background-change {      background: red;      /* should under .background-change or .box? */      transition: background 2s;  }

you can use both of these variants, they're both ok. should understand difference between them.

if set transition property new/separate class, transition applied when set class:

jsfiddle

$('.box').hover(function() {      $(this).toggleclass('background-change');  });

.box {      height: 200px;      width: 200px;      background: green;  }    .background-change {      background: red;      transition: background 2s;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    <div class="box">hover change background</div>

but if set transition property main/existing class, transition applied when remove class:

jsfiddle

$('.box').hover(function() {      $(this).toggleclass('background-change');  });

.box {      height: 200px;      width: 200px;      background: green;      transition: background 2s;  }    .background-change {      background: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    <div class="box">hover change background</div>

i prefer use last variant because looks better , consistently.