HTML elements are moving badly while animation - html

Question

i have a problem, HTML elements are moving while animation, i have captured 2 pics to guess what i want...
Before animation:
http://i031.radikal.ru/1406/9a/41e9b81ddaed.png
After animation:
http://i057.radikal.ru/1406/1b/c5e3f763fd98.png
all i want is, that after "transition", elements stay on their line...
Here is some HTML and CSS code
HTML
<div id="sliderdiv">
<ul>
<li>
<div id="bullets">
<div class="bullet" id="bul1"></div>
<div class="bullet" id="bul2"></div>
<div class="bullet" id="bul3"></div>
<div class="bullet" id="bul4"></div>
<div class="bullet" id="bul5"></div>
</div>
</li>
<li>
<div id="sliderimages">
<img src="sliderimages/bilberry.png">
<img src="sliderimages/dogrose.png">
<img src="sliderimages/dryedbilberry.png">
<img src="sliderimages/dryeddogrose.png">
<img src="sliderimages/dryedherbs.png">
<img src="sliderimages/wildapple.png">
</div>
</li>
<li>
<div id="arrows">
<div id="slideup"></div>
<div id="slidedown"></div>
</div>
</li>
</ul>
CSS
#sliderdiv{
text-align: center;
padding-top: 40px;
height: 771px;
width: 100%;
}
#sliderimages{
overflow: hidden;
text-align: center;
height: 771px;
width: 1187px;
}
#sliderdiv ul li{
list-style: none;
display: inline-block;
}
#arrows{
width: 26px;
margin-left: 5px;
}
#slideup{
margin-bottom: 10px;
}
#slideup{
cursor: pointer;
width: 26px;
height: 18px;
background-image: url('slideup.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slideup:hover{
background-image: url('slideuph.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown{
cursor: pointer;
overflow: hidden;
margin-bottom: 380px;
width: 26px;
height: 18px;
background-image: url('slidedown.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown:hover{
background-image: url('slidedownh.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
.bullet{
position: relative;
background-color: #747474;
width: 10px;
height: 10px;
margin-bottom: 15px;
border-radius: 30px;
border: none;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child{
margin-bottom: 350px;
}
.bullet:hover{
border-left: 5px;
border: solid 5px #747474;
background-color: #eeeeee;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child:hover{
margin-bottom: 350px;
}
#bullets{
margin-right: 10px;
}

Answer 1

You can set initial value for border property to 5px solid #FFFFFF to .bullet selector. Assuming here color #FFFFFF is the background color of your page (so it looks transparent).
And when hovering over the bullets replace border shorthand property with single longhand property border-color: #747474; inside the pseudo selector :hover, while border-width and border-style will be inherited from the initial border value 5px and solid
DEMO

Answer 2

Try adding this to your classes:
.bullet{
position: relative;
}
.bullet:hover{
right: 5px;
top: -5px;
margin-bottom: 5px;
}