Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

<div class="row">
  <div
    class="col p-3 mb-2 bg-secondary text-white mx-3 d-flex
    justify-content-center align-items-center rounded shadow-sm position-relative">
    <div class="flex-grow-1 text-center">{{parentName}}</div>
    <div class="spinner-border text-white position-absolute"
         style="right: 5px;"
         role="status" [ngClass]="{invisible:spinnerInvisibility}">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

Reference
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://www.quora.com/What-does-it-mean-when-the-parent-has-position-relative-and-the-child-has-position-absolute-in-CSS
https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/

How to make a div 100% height of the browser window

div {
    height:100vh;
}

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How is 100vh different to 100%?

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height

References
https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window

animate.css

Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

You can also detect when an animation ends:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

You can change the duration of your animations, add a delay or change the number of times that it plays:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

References
https://github.com/daneden/animate.css
https://daneden.github.io/animate.css/

CSS3 Animations

An animation lets an element gradually change from one style to another.

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

Delay an Animation

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

Set How Many Times an Animation Should Run

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

use the value “infinite” to make the animation continue for ever

Run Animation in Reverse Direction or Alternate Cycles

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

Specify the Speed Curve of the Animation

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

References
http://www.w3schools.com/css/css3_animations.asp

CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}
div:hover {
    width: 300px;
}

Change Several Property Values

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

Transition + Transformation

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

References
http://www.w3schools.com/css/css3_transitions.asp

CSS3 2D Transforms

translate()
The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

rotate()
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

scale()
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

skewX()
The skewX() method skews an element along the X-axis by the given angle.

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

skewY()
skew()
matrix()
The matrix() method combines all the 2D transform methods into one.

References
http://www.w3schools.com/css/css3_2dtransforms.asp