More about css

CSS Vendor Prefixes

  • -moz-
  • -webkit-
  • -ms-

What to read to know:

w3schools



Can I use

http://caniuse.com/



Prefixers:

http://cssprefixer.appspot.com/

http://css3please.com/

https://github.com/postcss/autoprefixer

Other examples for your motivation:

http://codepen.io/patrickkunka/pen/axEgL

http://codepen.io/noeldelgado/details/Dhqot

http://tympanus.net/Development/PageTransitions/

Transform Properties

  • transform: none | transform-functions;
  • transform-origin: x-axis y-axis z-axis;
  • transform-style: flat | preserve-3d;

div {
    transform: matrix(n,n,n,n,n,n);
    transform: rotate(Xdeg);
    transform: translate(Xpx,Xpx);
    transform: translateX(x);
    transform: translateY(y);
    transform: scale(n,n);
    transform: scaleX(x);
    transform: scaleY(y);
    transform: skew(x-angle,y-angle);
    transform: skewX(angle);
    transform: skewY(angle);
}

transforms

Transition Properties


transition: [transition-property] [transition-duration]
[transition-timing-function] [transition-delay];

div {
    width: 100px;
    height: 100px;
    background-color: yellow;
    transition: all 0.5s ease 1s;
}
div:hover {
    width: 200px;
    background: lightblue;
    transform: rotate(-45deg);
}

Transition values

  • transition-property: none | all | property can be multiple
  • transition-duration: s | ms
  • transition-timing-function: linear | easedefault | ease-in | ease-out | ease-in-out | steps
  • transition-delay: s | ms

When to use?

  • :hover
  • :active
  • :focus
  • :checked
  • :disabled
  • media queries

Animation

tra-la-la

tra-la-la

div {
    position: relative; margin: 0 auto; padding-top: 70px;
    background: #0080ff; box-sizing: border-box;
    width: 200px;height: 200px;   
    animation: tralala 5s infinite alternate;
}
@keyframes tralala {
    0%   {top: 0px; left: 0;}
    25%  {top: 100px; left: 100px; background: #0080ff;
          border-radius: 100px;}
    75%  {top: 50px; left: 5px; background: #ff0;}
    100% {top: 0px; left: 0px; border-radius: 0px;}
}

Don't forget about -webkit vendor prefix:

-webkit-animation, @-webkit-keyframes

Properties


animation: [name] [duration] [iteration-count] [direction]
[timing-function] [fill-mode] [delay]

@keyframes tralala {
    from {property: value;}
    to {property: value;}
}

animation-name: name;
animation-duration: Xs;
animation-iteration-count: [integer];
animation-direction: normal|alternate|reverse|alternate-reverse;
animation-timing-function: linear|ease|ease-in|ease-out|etc;
animation-fill-mode: forwards|backwards|both;
animation-delay: Xs;

Calc( )

Examples


width: calc(100% / 7 * 2);
height: calc(100% - 50px);
background-position: calc(100% - 350px) calc(50% + 20px);