CSS Transitions
Move the mouse across the green squares below.
* This transition effect utilises Hover interactions and does not work on iPads or iPhones. On Android devices, tapping the green squares will get the same effect as hovering with a pointing device.
There are various code options for identifying the user's operating system as IOS, which will signify an Apple product. However, this is beyond the scope of this tutorial.
See the Pen gOaZerQ by Adam Frost (@adam-frost) on CodePen.
Click the HTML and CSS buttons above to see the code that created the Result.
Click the cube icon in top-right of the panel to edit the code at codepen.io where you can immediately see the effects of any changes you make.
Other CSS transition properties are:
- transition-delay: 1s; 1 second delay
- transition-duration: 0.2s; 0.2 second duration, as defined in shorthand in the above example.
- transition-property: width, height;
the transition will apply only to the specified property(-ies).
Other standard CSS syntax transition-property values are:- none (No property will undergo a transition effect.)
- all (Default value. All properties can undergo transition effects.)
- initial The value reverts to default setting ( all in this case).
- inherit (The value is inherited from the parent element.)
- transition-timing-function:
the following options:
- linear (consistent speed of change throughout the duration)
- ease-in (starts slow; speeds up.)
- ease-out (starts fast; slows down.)
- ease-in-out (starts and ends slow; faster in the middle.)
- ease (similar to ease-in-out except it starts a little faster than it ends.)
That's the last of this series of tutorial pages for now (there will be more in due course - watch this space).