index.html

			<h2>Transitions</h2>
			<div class="col column-12">
				<div class="transition-long"></div><br>
				<div class="transition-short"></div>
			</div>

			<br style="clear:both"><br><br>

			<h2>Transforms</h2>
			<div class="col column-12">
				<div class="opacity"></div><br>
				<div class="scale"></div><br>
				<div class="rotate"></div><br>
				<div class="translate"></div><br>
				<div class="opacity-scale-rotate-translate"></div><br>
			</div>

style.css

/* Transitions */

.transition-long {
    background-color: #0074D9;
    width: 100px;
    height: 100px;
    opacity: 1;

    transition-property: background-color;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0.5s;
}
.transition-long:hover {
    background-color: #FF851B;
    width: 150px;
    height: 150px;
    opacity: .5;
}

.transition-short {
    background-color: #0074D9;
    width: 100px;
    height: 100px;
    opacity: 1;

    transition: background-color 1.5s linear,
                width 1s linear 0.5s,
                height 0.5s linear 1s,
                opacity 1.5s ease;
}
.transition-short:hover {
    background-color: #FF851B;
    width: 150px;
    height: 150px;
    opacity: .5;
}

/* Transforms */


.opacity,
.scale,
.rotate,
.translate,
.opacity-scale-rotate-translate {
    background-color: #0074D9;
    width: 100px;
    height: 100px;
    opacity: 1;
    transition: all 1s ease-in-out 0s;
}

.opacity:hover {
  opacity: 0.5;
}

.scale:hover {
  transform:scale(1,0.5);
}

.rotate:hover {
  transform:rotate(45deg);
}

.translate:hover {
  transform:translate(10px, 20px);
}


.opacity-scale-rotate-translate:hover {
  transform: scale(2, 2)
             rotate(40deg)
             translate(10px, 20px);
  opacity: 0.5;
}

wJFIB.markdown

wJFIB

A Pen by Steve Viens on CodePen.

License.