Style: | Linear Radial |
Gradient: | Work with F12 Console |
Angle: | deg |
Shape: | ellipse(Default) circle |
Repeating: | Gradient Repeating |
animation-duration: | |
animation-timing-function: | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
animation-delay: | |
animation-iteration-count: | infinite | Number: |
animation-direction: | normal alternate |
animation-play-state: | pausedrunning |
animation-fill-mode: | none forwards (Last keyframe) backwards (First Keyframe) both (specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). |
:hover,:focus,:active,:checked or JavaScript trigger
CSS transitions allows you to change property values smoothly, over a given duration.
transition-duration | |
transition-timing-function | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
transition-delay |
Selectors | Type |
---|---|
\* | Universal selector |
elementname | Type selector |
#idname | ID selector |
.classname | Class selector |
[attr] [attr=value] | Attribute selector |
A B, A > B, A + B, A ~ B | Combinators selectors |
selector1, selectorN | Grouping selectors |
:: | Pseudo |
Universal selector:
element = baseElement.querySelector(selectors)
media screen:
3 ways to create print style