Cascading Style Sheets
- Link pseudo-classes
- Positioning
- Colors
- CSS Animation
- Links
- Transitions
- transition-duration
- transitionend
- transition-timing-function
- {:tag :code, :attrs nil, :content ["transition-delay"]}
- transition shorthand
:link
:visitied
:hover
:focus
:active
position: relative;
: makes an element's position relative to parent container. The left/right/top/bottom/z-index will nudge the element. Everything else sticks to normal page flowposition: static;
: this is the default. the element will stick to normal page flowposition: absolute
: element is removed from flow of document. Other elements behave as if it's not even there.fixed
: the element is removed from the flow likeabsolute
. Almost the same asabsolute
exceptfixed
elements are related to the document whereasabsolute
are relative to parent.inherit
: theposition
value doesn't cascade, so use this to force it to.- Hexadecimal
- RGB functional notation
- HSL functional notation
- Twelve Principles of Animation
- Play with easing functions
- Easing functions
- List animations, FLIP technique
Link pseudo-classes
Positioning
Colors
3 ways to represent colors
For Example: #rrggbb
specifies 0xrr
for R(ed), 0xgg
for G(reen) and 0xbb
for B(lue).
Another example: #rrggbbaa
. The last aa
specifies an "alpha channel". The lower the value, the more translucent the color.
Integers between 0 and 255 or percentages from 1 to 100.
For example: rgb(0, 0, 0.5)
, or: rgb(100%, 0, 0, 50%)
Hue Saturation Lightness
Hue is an angle 0-360 degrees that specifies the color.
Angles in css can be specified as deg
, grade
, turn
or rad
.
The Saturation specifies what percentage of the hue is used.
The lightness specifies as the grey level.
CSS Animation
Links
Transitions
Most properties that have numbers as values (including colors) can be transitioned. But some animatable properties have values that can't be animated (such as auto
).
transition-property
Use all
to include all css properties in scope and inherited. Or list individual properties
transition-duration
Some valid values are 100ms
, 2s
, etc
It's possible to define different transition-duration
s, one for fading in and a different one for fading out for example. The duration on the to
property will be used.
Negative values are not valid.
transitionend
End events are thrown whenever transitions end. Note that one transitionend event is thrown for each property. So, for example, if you define a transition on border, there will be one event for border-left, one for border-right, one for border-bottom, and one for border-top.
document.querySelector('div').addEventListener('transitionend',
function(e) {
console.log(e.propertyName);
});
transition-timing-function
Basic timing functions include: ease
, linear
, ease-in
, ease-out
, ease-in-out
. Plus you can use the cubic-bezier
to do anything you want. There are a lot of other predefined advanced easing functions like easeInCubic
, easeInQuart
, etc, etc.
In addition to easing function, you also define the steps. Steps divide the animation into number of equal segments. It'll display either the start or end freeze frame for amount of time before progressing to next step.
transition-delay
property
Positive values will delay the effect. Negative values are valid also. Negative values make the transition start immediately somewhere in the middle of the transition. In other words, it skips forward the time of the negative duration.
Pro tip: Use 50ms delay to prevent animations from starting while mouse is moved over them. Usually 50ms is too small to notice, but just long enough to prevent unwanted animation from starting.
transition shorthand
Combines transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
Accepts value of none
or comma separated list of single transitions.