CSS Transitions - Only Complete Half of the Cycle
Starting to learn CSS Transitions and I have to say they are great! When learning one thing that I encountered was that the transition would not smoothly rewind after completing half the cycle. So for instance, smoothly changing the color to another, but when I remove the mouse from the element it reverts back without any transition. As I am sure most of you have guessed, I was not placing the transition elements in the correct spot. I was placing them in the hover event, while they need to be in the default state. Looks like translations need to put in the CSS event. Also, using -Prefix-Free makes all this stuff easier too, where you do not need to add the prefixes for each browser. Ref: https://www.sitepoint.com/community/t/webkit-transition-working-in-only-one-direction/7223/3 https://leaverou.github.io/prefixfree/