I’m trying to add a transition to a grid of elements whereby a grid element, when clicked, should rise (by changing box-shadow) and then expand to fill a container. Currently I use javascript to clone the element, append it to my container with injected styles for the starting position (top, left and width), and then add a touched class that has the finishing properties (top, left, bottom, right and width), which I had hoped I could use with CSS transitions to apply the animation. My current syntax is intended to apply a transition of 0.5s to the box-shadow effect and a transition of 0.5s with a 0.5s delay to my left, right, bottom, top and width properties for the expansion.
Instead, with my current set up the element is just immediately filling the container with no transitions applied.
A reduced test case can be found here:
http://codepen.io/Grotfang/pen/ZYGmrZ
This is the first time I’ve done any work with CSS transitions and I am aware I may have gotten something fundamentally wrong. Any advice would be appreciated.
