day 14 - PitchEngine/code-wyoming GitHub Wiki

Tables

Table children

• caption
• colgroup
• thead
• tbody
• tfoot

Grand Children

• tr
• td
• th

Transforms

CSS Tricks:Transform Transforms + Transitions Transformed elements still occupy their original space (like relative elements)

• transform-origin: x y;

Transform

Multiple transformations just need spaces

• matrix (?!?)
• rotate(angle)
• translateX, translateY, translate(x, y)
• scale(sx[, sy]), scaleX, scaleY (angle)

Animations

Animation property

Animations are a W3C working draft! Check out the CanIUse for them.

CanIUse Css Animation?

CSS Tricks Animation Tricks

Animations on MDN

• animation-duration
• animation-delay Time between element loading and beginning of animation (5s)
• animation-direction: normal (default) | reverse |alternate | alternate-reverse |
• animation-iteration-count How many times to repeat; infinite is an option here
• animation-name Link to your keyframe
• animation-timing-function This is a big deal. See MDN

.element-to-animate {
  animation: NAME-YOUR-ANIMATION 5s infinite;
}

Keyframes

Use commas if you have shared start and stops

@keyframe your-animation-name {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

If you have just two stops, use from and to.

Bootstrap

Helper classes