Rozsuwanie w przeciwną stronę "-moz-transition: width 1s linear;"

Witam otóż bez użycia JS można zrobić wysuwany DIV po najechaniu na niego kursorem. Owszem to działa ale div wysuwa się z lewej strony schowanej do prawej. Czy mogę ten efekt jakoś odwrócić ? Ponieważ mój box który chciałbym wysuwać jest z prawej strony przeglądarki.

Tak wygląda kod który wysuwa w prawo.

 #slideDiv {
  width: 5px;
  height: 20px;
  overflow: hidden;
  background: green;
  color: #fff;
  -moz-transition: width 1s linear;
  -webkit-transition: width 1s linear;
}

#slideDiv:hover {
  width: 20px;
}

Ech.. Kto Ciebie uczył dodawać regułki z prefixami (-moz-, -webkit-) a nie dodawać ich BEZ prefixów? Taka strona nie dość, że będzie działać tylko na dwóch przeglądarkach - to za parę miesięcy, kiedy przeglądarki zrezygnują z prefixów - nie będzie działać na żadnej.

A chyba tu jest czytelne, o co chodzi - pierwszy parametr w transition opisuje co chcesz animować. Width. Szerokość. Jeżeli zwiększasz szerokość elementu od 5 do 20 - WYDAJE się, że jest to wyjazd z lewej strony. A to tylko zmiana rozmiaru. Żeby zrobić wyjazd - to już właściwości top/bottom oraz left/right. W połączeniu z position: relative/absolute.

@dzek69

Dzięki za cierpliwość i odpowiedź. Pro po regułek google tak uczy a przynajmniej Ang tutki.
Jeszcze raz dzięki masz u mnie bro. Pozdrawiam ! :D