Fragmentos de CSS comunes

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en transición y animaciones. Fragmentos de CSS comunes - common CSS snippets  en CSS3.

CSS Reset
@import 'normalize.css';

html {
  box-sizing: border-box;
}
*:not(input) {
  border: 0;
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
*[hide] {
  display: none;
}
*[disabled] {
  opacity: .5;
  pointer-events: none;
}
Clearfix
element::after {
  content: "";
  display: block;
  clear: both;
}
Text truncate
element {
  display: inline-block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
Text hide
element {
  font: 0/0 a;
  color: transparent;
  text-indent: -9999px;
}
Transform centering
element.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
element.justify-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
element.align-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Ver resultado