Intro To CSS Transitions

I almost feel guilty spending time on this, as it seems like too much fun to be considered work or study time. I previously posted on CSS animations and thought that transitions were worthy of their own post. As with animations, I found this lesson by Shay Howe to be especially helpful.

In the spirit of keeping things simple, I started off by making a circle. Screen Shot 2014-01-24 at 12.26.43 PM

The next step is establish what you will want this circle to do once someone hovers over it. We will do this by adding a pseudo class selector on the circle of :hover. There are other pseudo selectors you can use here, but we will use :hover for this example. Define what you will want it to look like when hovered over.

Now, back to the circle. You will need to add specific transition properties here. There are four transition related properties, including: transition-property, transition-duration, transition-timing-function, and transition-delay. You do not need to use all of these to generate a transition. In the code below we are telling the element what part will transition, how long it will take to transition, and to transition at a constant speed from one state to the other. If we added a transition-delay here it would delay the reaction time once the element is hovered over. Screen Shot 2014-01-24 at 12.34.07 PM

See the Pen Transition Practice by Joni Trythall (@jonitrythall) on CodePen.

For further reading I found this article at Web Designer Depot to be pretty neat.

Happy transitioning!