Cascading Style Sheets

  1. Link pseudo-classes
  2. Positioning
  3. Colors
    1. 3 ways to represent colors
  4. CSS Animation
    1. Links
    2. Transitions
      1. transition-property
    3. transition-duration
    4. transitionend
    5. transition-timing-function
    6. {:tag :code, :attrs nil, :content ["transition-delay"]}
    7. transition shorthand

    Link pseudo-classes

    • :link
    • :visitied
    • :hover
    • :focus
    • :active

    Positioning

    • 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 flow
    • position: static;: this is the default. the element will stick to normal page flow
    • position: 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 like absolute. Almost the same as absolute except fixed elements are related to the document whereas absolute are relative to parent.
    • inherit: the position value doesn't cascade, so use this to force it to.

    Colors

    3 ways to represent colors

    1. Hexadecimal

    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.

    1. RGB functional notation

    Integers between 0 and 255 or percentages from 1 to 100.

    For example: rgb(0, 0, 0.5), or: rgb(100%, 0, 0, 50%)

    1. HSL functional notation

    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-durations, 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.