Ich denke, es hat vielleicht etwas mit einem Pseudoelement zu tun, aber ich bin mir nicht sicher. Ich habe Probleme mit dem Effekt eines Transformationsübergangs mit CSS3. In Firefox v24 funktioniert der Effekt so, wie ich es möchte - den CodePen finden Sie hierhttp://codepen.io/patrickwc/pen/aKEec In Chrome und IE wird der Randeffekt der Links jedoch animiert und schaltet sich plötzlich wieder in Position. Es ist schwer zu beschreiben, daher ist es am besten, den Effekt in Firefox und dann in Chrome oder IE zu betrachten.

body {
  background: #000;
  color: #fff;
}

p {
  text-align: center;
}

nav.footer-social-links a {
  position: relative;
  margin: 0 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1px 12px 0 8px;
  height: 32px;
  line-height: 30px;
  outline: none;
  font-size: 0.8em;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

nav.footer-social-links a:hover,
nav.footer-social-links a:focus {
  outline: none;
}

.footer-social-links a::before,
.footer-social-links a::after {
  position: absolute;
  width: 30px;
  height: 2px;
  background: #fff;
  content: '';
  opacity: 0.2;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}

.footer-social-links a::before {
  top: 0;
  left: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

.footer-social-links a::after {
  right: 0;
  bottom: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.footer-social-links a:hover::before,
.footer-social-links a:hover::after,
.footer-social-links a:focus::before,
.footer-social-links a:focus::after {
  opacity: 1;
}

.footer-social-links {
  margin: 0;
  text-align: center;
}

.footer-social-links a {
  color: white;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
  text-decoration: none;
}

.footer-social-links a:hover::before,
.footer-social-links a:focus::before {
  width: 80%;
  left: 10%;
  -webkit-transform: rotate(0deg) translateX(50%);
  -moz-transform: rotate(0deg) translateX(50%);
  transform: rotate(0deg) translateX(50%);
}

.footer-social-links a:hover::after,
.footer-social-links a:focus::after {
  width: 80%;
  right: 5%;
  -webkit-transform: rotate(0deg) translateX(50%);
  -moz-transform: rotate(0deg) translateX(50%);
  transform: rotate(0deg) translateX(50%);
}

<br/>

<nav class="footer-social-links">
  <a href="google" target="_blank">
    <i class="shc icon-e-gplus"></i>Gplus </a>
  <a href="facebook" target="_blank">
    <i class="shc icon-e-facebook"></i>Facebook </a>
  <a href="twitter" target="_blank">
    <i class="shc icon-e-twitter"></i>Twitter </a>
  <a href="linkedin" target="_blank">
    <i class="shc icon-e-linkedin"></i>Linkedin </a>
  <a href="skype" target="_blank">
    <i class="shc icon-e-skype"></i>Skype </a>
  <a href="http://last.fm/user/zerodegreeburn" target="_blank">
    <i class="shc icon-e-lastfm"></i>Lastfm </a>
</nav>

<p>Fixed with help from css-tricks forum and stackoverflow <a href="http://codepen.io/patrickwc/pen/uFGlz" target="_blank">here</a>
</p>

Ich habe das Gefühl, mit transform-origin in Konflikt zu geraten, aber ich habe es nicht geschafft, das zum Laufen zu bringen. Jede Hilfe oder Erklärung bezüglich des Unterschieds wäre sehr dankbar.