Transitions allow you to add subtle changes to elements over a specific duration of time. There are 5 transition properties: transition-delay, transition-duration, transition-property, transition-timing-function, and transition.

Transition is a property that can be used as a shorthand property for all other properties.

Example

In this example, the "transition" property has been used. The "all" refers to which properties will transition (all of them), 0.5s is the transition-duration, and "ease" is the transition-timing-function or the speed curve. Ease has a slow start, then fast, then end slowly.

Resources

To trigger transitions, you can use the the pseudo classes :hover or :active. Hover does not work for mobile applications since there is no way to hover on mobile. However, active might work well for pressing links if you need something to occur over a specific duration of time. The best practice is to use Javascript to trigger transitions. Something that I have noticed in mobile web applications is using javascript to allow images and words to appear on scroll. The transition would control the timing of when these items appear.

Resources

Week 7 Teaching Video

My teaching presentation starts at 0:00 and ends at 11:26.