zyBooks Ch 5.5 - 5.8
Animations, Transitions and Transformations
CSS animations allow for gradually changing the style of an element without the use of JavaScript or jQuery. The animation needs to be bound to the element which will be animated.
The main properties used in animations include:
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
CSS Transitions
CSS transitions change the value of a property over a time duration. A transition effect needs to know the property and the duration of the effect.
The main properties used in transitions include:
transition-delay
transition-duration
transition-property
transition-timing-function
CSS Transformations
The transform property can be used to create 2D and 3D transformations such as rotating, moving or scaling an element. There are multiple transformation property values used in the general syntax
transform: none|transform-functions|initial|inherit;
Form Styles
CSS styled forms appear more interactive and can be easier to use if the controls are vertially allgined.
ZyBooks 5:5 - 5:8
Upon successful completion of the material students will be able to apply the following concepts and techniques to their work: CSS Animations, transitions and transformations CSS styling for forms