Read 14 ~ CSS Transforms, Transitions, and Animations
By Abdallah obaid
| NAME | URL |
|---|---|
| Home | Home. |
| Read 01 | Introductory HTML and JavaScript. |
| Read 02 | HTML Text, CSS Introduction, and Basic JavaScript Instructions. |
| Read 03 | HTML Lists, CSS Boxes, JS Control Flow. |
| Read 04 | HTML Links, CSS Layout, JS Functions. |
| Read 05 | HTML Images; CSS Color & Text. |
| Read 06 | JS Object Literals; The DOM. |
| Read 07 | HTML Tables; JS Constructor Functions. |
| Read 08 | More CSS Layout. |
| Read 09 | Forms and Events. |
| Read 10 | JS Debugging. |
| Read 11 | Assorted Topics. |
| Read 12 | Docs for the HTML canvas Element & Chart.js. |
| Read 13 | Local Storage. |
| Read 14a | CSS Transforms, Transitions, and Animations. |
| Read 14b | What Google Learned About Teams. |
Transitions and animation:-
- One evolution with CSS3 was the ability to write behaviors for transitions and animations.
- With CSS3 transitions We have the potential to alter the appearance and behavior of an element whenever a state change occurs.
- The easiest way for determining styles for different states is by using the
:hover,:focus,:active, and:targetpseudo-classes. - The actual syntax for the transform property is quite simple, including the transform property followed by the value. The value specifies the transform type followed by a specific amount inside parentheses.
- The rotate value provides the ability to rotate an element from 0 to 360 degrees.
- Scale value within the transform property allows you to change the appeared size of an element.
- The translate value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document.
- Skew, is used to distort elements on the horizontal axis, vertical axis, or both.
