CSS3 Hover transition strange behavior
- by Aleksandar Ivanov
So I was playing around with transition/hover effects so that's the code.
<pre>
<code>
/* HTML */
section>
a href="#" title="button">CLICK!</a> // deleted the lt sign for visibility reasons!
a href="#" title="button">CLICK!</a>
a href="#" title="button">CLICK!</a>
a href="#" title="button">CLICK!</a>
/section>
/********/
/* CSS */
section{
width: 700px;
height: 500px;
margin: 250px auto;
position: relative;
background: #08c;
}
section a{
border-radius: 51px;
background: #e60;
line-height: 100px;
text-align: center;
color: #04e;
font-size: 24px;
font-weight: bold;
font-family: tahoma;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
}
section a:nth-child(1){
position: absolute;
top: -100px;
left: -100px;
-webkit-transition: left 2s ease;
}
section a:nth-child(2){
position: absolute;
top: -100px;
right: -100px;
-webkit-transition: top 2s ease;
}
section a:nth-child(3){
position: absolute;
bottom: -100px;
right: -100px;
-webkit-transition: right 2s ease;
}
section a:nth-child(4){
position: absolute;
bottom: -100px;
left: -100px;
-webkit-transition: bottom 2s ease;
}
section a:nth-child(1):hover,section a:nth-child(1):focus{
left: 800px;
}
section a:nth-child(2):hover{
top: 600px;
}
section a:nth-child(3):hover{
right: 800px;
}
section a:nth-child(4):hover{
bottom: 600px;
}
/*******/
</code>
</pre>
BUT, I stumbled upon a strange thing. When I hover over a link its starts getting to its right position applied by the hover, but at some point (always different) the effect stops and it gets back to its original position!
Have anyone seen this and know what is the problem ?
