Trying to transition this psuedo element - CSS3 Transform rotate

Question

I am trying to transition a psuedo element and wanted to know if this is possible. I have read that this was not possible for a while but apparently now it is, but I cannot get it working.

Here is a codepen http://codepen.io/anon/pen/WbGeaB - When you click on the hamburger icon, I want the psuedo elements to transition when they rotate, currently only the middle bar has the transition applied (which works because this is not a psuedo element).

If psuedo elements are not able to transition, is there a another way to get the effect I desire?

Thanks in advance

HTML

<a class="toggleMenu" href="#">
  <span class="menuIcon"></span>
</a>

CSS

.toggleMenu {
  display: block;
  position: absolute;
  padding:1.8em;
  left:50%;
  top:50%;
}  

.menuIcon {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 5px;
    background-color: #555;
/*-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
transition: transform 1s ease;*/
-webkit-transition:all 1s ease;
}

.menuIcon:before,
.menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}

.menuIcon:before {
    bottom: 20px;
}
.menuIcon:after {
    top: 20px;
}

.menuIcon.clicked {
    background-color: rgba(255, 255, 255, 0);
}

.menuIcon.clicked:before,
.menuIcon.clicked:after {
    background-color: #555;
}

.menuIcon.clicked:before {
    bottom: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}   

.menuIcon.clicked:after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}   

Javascript

$(function(){   
   $(".toggleMenu").click(function(){
      $(".menuIcon").toggleClass("clicked");
     });
 });

Answer 1

You can apply transitions to pseudo elements; in your situation you just need to add the

transition:all 1s ease;

to the pseudo element's rule. The pseudo elements don't inherit all of their parent's rules.

So your rule on the pseudo elements would look like this:

.menuIcon:before,
.menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;

    /* add the transition here */
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
}

forked codepen:

http://codepen.io/anon/pen/wBzwNO

Answer 2

Transition can be applyed on pseudo elements, but you should define it in the pseudo element's class itself. In your case:

.menuIcon:before,.menuIcon:after {
    -webkit-transition: all 1s ease;
    transition:all 1s ease
}

.menuIcon.clicked:before,.menuIcon.clicked:after {
    -webkit-transition:all 1s ease;
    transition:all 1s ease
}

Pay attetion that it should be both -webkit-transition and transition exactly in this order to ensure that your code will work on all the platforms. -moz, -ms and -o are unneccessaty. Read more about the transitions compatibility in this article: http://www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3