diff --git a/build/cssplot.base.css b/build/cssplot.base.css
index c91d1ed..10d9c66 100644
--- a/build/cssplot.base.css
+++ b/build/cssplot.base.css
@@ -11,10 +11,11 @@
 .bar-chart .chart-row,
 .column-chart [data-cp-size],
 .bar-chart [data-cp-size],
-.plot-container > * > * {
+.stacked .plot-container > * {
   list-style: none;
   border: 1px solid #ffffff;
 }
+.stacked .plot-container > * > * { border: none; }
 .column-chart .plot-container {
   display: -webkit-flex;
   display: flex;
@@ -32,15 +33,16 @@
   margin: 0;
   min-height: 100px;
 }
-.column-chart.stacked > * > * {
-  height: 100%;
+.column-chart.stacked .plot-container.group-by > * { height: 100%; }
+.column-chart.stacked .plot-container.group-by:not([data-cp-animation]) > *,
+.column-chart.stacked .plot-container.group-by[data-cp-animation="fade"] > * {
   -webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
   -o-transform: scaleY(-1);
   -ms-transform: scaleY(-1);
   transform: scaleY(-1);
 }
-.column-chart.stacked .group-by-number [data-cp-size] {
+.column-chart.stacked .plot-container.group-by [data-cp-size] {
   -webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
   -o-transform: scaleY(-1);
@@ -79,7 +81,7 @@
 .bar-chart.stacked > * > * {
   display: flex;
 }
-.bar-chart.stacked .group-by-number [data-cp-size] {
+.bar-chart.stacked .group-by [data-cp-size] {
   display: inline-block;
 }
 .scatter-plot .plot-container {
diff --git a/build/cssplot.full.css b/build/cssplot.full.css
index 5f347fa..6b3e775 100644
--- a/build/cssplot.full.css
+++ b/build/cssplot.full.css
@@ -11,16 +11,20 @@
 .bar-chart .chart-row,
 .column-chart [data-cp-size],
 .bar-chart [data-cp-size],
-.plot-container > * > * {
+.stacked .plot-container > * {
   list-style: none;
   border: 1px solid #ffffff;
 }
+.stacked .plot-container > * > * { border: none; }
 .column-chart .plot-container {
   display: -webkit-flex;
+  display: -moz-flex;
   display: flex;
   -webkit-flex-direction: row;
+  -moz-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
   flex-wrap: nowrap;
   position: absolute;
   text-align: center;
@@ -32,27 +36,26 @@
   margin: 0;
   min-height: 100px;
 }
-.column-chart.stacked > * > * {
-  height: 100%;
+.column-chart.stacked .plot-container.group-by > * { height: 100%; }
+.column-chart.stacked .plot-container.group-by:not([data-cp-animation]) > *,
+.column-chart.stacked .plot-container.group-by[data-cp-animation="fade"] > * {
   -webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
-  -o-transform: scaleY(-1);
-  -ms-transform: scaleY(-1);
   transform: scaleY(-1);
 }
-.column-chart.stacked .group-by-number [data-cp-size] {
+.column-chart.stacked .plot-container.group-by [data-cp-size] {
   -webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
-  -o-transform: scaleY(-1);
-  -ms-transform: scaleY(-1);
   transform: scaleY(-1);
 }
 .column-chart .chart-column,
 .column-chart [data-cp-size],
 .column-chart.stacked > * > * {
   -webkit-flex-grow: 1;
+  -moz-flex-grow: 1;
   flex-grow: 1;
   -webkit-align-self: flex-end;
+  -moz-align-self: flex-end;
   align-self: flex-end;
 }
 .column-chart .chart-column,
@@ -67,6 +70,8 @@
   clear: both;
 }
 .bar-chart .plot-container {
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
   flex-direction: row;
   padding: 0;
   margin: 0;
@@ -77,9 +82,11 @@
   min-height: 8px;
 }
 .bar-chart.stacked > * > * {
+  display: -webkit-flex;
+  display: -moz-flex;
   display: flex;
 }
-.bar-chart.stacked .group-by-number [data-cp-size] {
+.bar-chart.stacked .group-by [data-cp-size] {
   display: inline-block;
 }
 .scatter-plot .plot-container {
@@ -103,6 +110,393 @@
   border: 6px solid #3498db;
   border-radius: 100%;
 }
+.plot-container[data-cp-animation="fade"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-opacity;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-opacity;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-opacity;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow"] > * {
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  transform: scale(0);
+  -webkit-animation-name: chart-grow;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-grow;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-grow;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow-down"] > *,
+.plot-container[data-cp-animation="grow-up"] > * {
+  -webkit-transform: scaleY(0);
+  -moz-transform: scaleY(0);
+  transform: scaleY(0);
+  -webkit-animation-name: chart-grow-y;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-grow-y;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-grow-y;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow-right"] > *,
+.plot-container[data-cp-animation="grow-left"] > * {
+  -webkit-transform: scaleX(0);
+  -moz-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-animation-name: chart-grow-x;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-grow-x;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-grow-x;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow-down"] > * {
+	-webkit-transform-origin: center top;
+	-moz-transform-origin: center top;
+	transform-origin: center top;
+}
+.plot-container[data-cp-animation="grow-right"] > * {
+	-webkit-transform-origin: left center;
+	-moz-transform-origin: left center;
+	transform-origin: left center;
+}
+.plot-container[data-cp-animation="grow-up"] > * {
+	-webkit-transform-origin: center bottom;
+	-moz-transform-origin: center bottom;
+	transform-origin: center bottom;
+}
+.plot-container[data-cp-animation="grow-left"] > * {
+	-webkit-transform-origin: right center;
+	-moz-transform-origin: right center;
+	transform-origin: right center;
+}
+.plot-container[data-cp-animation="slide-down"],
+.plot-container[data-cp-animation="slide-right"],
+.plot-container[data-cp-animation="slide-up"],
+.plot-container[data-cp-animation="slide-left"] { overflow: hidden; }
+.plot-container[data-cp-animation="slide-down"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-down;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-down;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-down;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="slide-right"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-right;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-right;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-right;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="slide-up"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-up;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-up;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-up;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="slide-left"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-left;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-left;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-left;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+@-webkit-keyframes chart-opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-moz-keyframes chart-opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes chart-opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes chart-grow {
+  from { -webkit-transform: scale(0); }
+  to { -webkit-transform: scale(1); }
+}
+@-moz-keyframes chart-grow {
+  from { -moz-transform: scale(0); }
+  to { -moz-transform: scale(1); }
+}
+@keyframes chart-grow {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
+}
+@-webkit-keyframes chart-grow-x {
+  from { -webkit-transform: scaleX(0); }
+  to { -webkit-transform: scaleX(1); }
+}
+@-moz-keyframes chart-grow-x {
+  from { -moz-transform: scaleX(0); }
+  to { -moz-transform: scaleX(1); }
+}
+@keyframes chart-grow-x {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+@-webkit-keyframes chart-grow-y {
+  from { -webkit-transform: scaleY(0); }
+  to { -webkit-transform: scaleY(1); }
+}
+@-moz-keyframes chart-grow-y {
+  from { -moz-transform: scaleY(0); }
+  to { -moz-transform: scaleY(1); }
+}
+@keyframes chart-grow-y {
+  from { transform: scaleY(0); }
+  to { transform: scaleY(1); }
+}
+@-webkit-keyframes chart-slide-down {
+  from { -webkit-transform: translateY(-100%); }
+  to { -webkit-transform: translateY(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-down {
+  from { -moz-transform: translateY(-100%); }
+  to { -moz-transform: translateY(0); opacity: 1; }
+}
+@keyframes chart-slide-down {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); opacity: 1; }
+}
+@-webkit-keyframes chart-slide-right {
+  from { -webkit-transform: translateX(-100%); }
+  to { -webkit-transform: translateX(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-right {
+  from { -moz-transform: translateX(-100%); }
+  to { -moz-transform: translateX(0); opacity: 1; }
+}
+@keyframes chart-slide-right {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); opacity: 1; }
+}
+@-webkit-keyframes chart-slide-up {
+  from { -webkit-transform: translateY(100%); }
+  to { -webkit-transform: translateY(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-up {
+  from { -moz-transform: translateY(100%); }
+  to { -moz-transform: translateY(0); opacity: 1; }
+}
+@keyframes chart-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); opacity: 1; }
+}
+@-webkit-keyframes chart-slide-left {
+  from { -webkit-transform: translateX(100%); }
+  to { -webkit-transform: translateX(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-left {
+  from { -moz-transform: translateX(100%); }
+  to { -moz-transform: translateX(0); opacity: 1; }
+}
+@keyframes chart-slide-left {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); opacity: 1; }
+}
+.column-chart.stacked .plot-container[data-cp-animation="grow"] > *{
+  -webkit-animation-name: stacked-column-chart-grow;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-grow;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-grow;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="grow-down"] > *,
+.column-chart.stacked .plot-container[data-cp-animation="grow-up"] > * {
+  -webkit-animation-name: stacked-column-chart-grow-y;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-grow-y;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-grow-y;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="grow-right"] > *,
+.column-chart.stacked .plot-container[data-cp-animation="grow-left"] > * {
+  -webkit-animation-name: stacked-column-chart-grow-x;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: tacked-column-chart-grow-x;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-grow-x;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-down"] > * {;
+  -webkit-animation-name: stacked-column-chart-slide-down;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-down;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-down;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-right"] > * {;
+  -webkit-animation-name: stacked-column-chart-slide-right;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-right;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-right;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-up"] > * {
+  -webkit-animation-name: stacked-column-chart-slide-up;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-up;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-up;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-left"] > * {
+  -webkit-animation-name: stacked-column-chart-slide-left;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-left;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-left;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+@-webkit-keyframes stacked-column-chart-grow {
+  from { -webkit-transform: scaleX(0) scaleY(0); }
+  to { -webkit-transform: scaleX(1) scaleY(-1); }
+}
+@-moz-keyframes stacked-column-chart-grow {
+  from { -moz-transform: scaleX(0) scaleY(0); }
+  to { -moz-transform: scaleX(1) scaleY(-1); }
+}
+@keyframes stacked-column-chart-grow {
+  from { transform: scaleX(0) scaleY(0); }
+  to { transform: scaleX(1) scaleY(-1); }
+}
+@-webkit-keyframes stacked-column-chart-grow-x {
+  from { -webkit-transform: scaleX(0) scaleY(-1); }
+  to { -webkit-transform: scaleX(1) scaleY(-1); }
+}
+@-moz-keyframes stacked-column-chart-grow-x {
+  from { -moz-transform: scaleX(0) scaleY(-1); }
+  to { -moz-transform: scaleX(1) scaleY(-1); }
+}
+@keyframes stacked-column-chart-grow-x {
+  from { transform: scaleX(0) scaleY(-1); }
+  to { transform: scaleX(1) scaleY(-1); }
+}
+@-webkit-keyframes stacked-column-chart-grow-y {
+  from { -webkit-transform: scaleY(0) translateY(100%); }
+  to { -webkit-transform: scaleY(-1) translateY(100%); }
+}
+@-moz-keyframes stacked-column-chart-grow-y {
+  from { -moz-transform: scaleY(0) translateY(100%); }
+  to { -moz-transform: scaleY(-1) translateY(100%); }
+}
+@keyframes stacked-column-chart-grow-y {
+  from { transform: scaleY(0) translateY(100%); }
+  to { transform: scaleY(-1) translateY(100%); }
+}
+@-webkit-keyframes stacked-column-chart-slide-down {
+  from { -webkit-transform: translateY(-100%) scaleY(-1); }
+  to { -webkit-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-down {
+  from { -moz-transform: translateY(-100%) scaleY(-1); }
+  to { -moz-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-down {
+  from { transform: translateY(-100%) scaleY(-1); }
+  to { transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-webkit-keyframes stacked-column-chart-slide-down {
+  from { -webkit-transform: translateY(-100%) scaleY(-1); }
+  to { -webkit-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-down {
+  from { -moz-transform: translateY(-100%) scaleY(-1); }
+  to { -moz-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-right {
+  from { transform: translateX(-100%) scaleY(-1); }
+  to { transform: translateX(0) scaleY(-1); opacity: 1; }
+}
+@-webkit-keyframes stacked-column-chart-slide-up {
+  from { -webkit-transform: translateY(100%) scaleY(-1); }
+  to { -webkit-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-up {
+  from { -moz-transform: translateY(100%) scaleY(-1); }
+  to { -moz-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-up {
+  from { transform: translateY(100%) scaleY(-1); }
+  to { transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-webkit-keyframes stacked-column-chart-slide-left {
+  from { -webkit-transform: translateX(100%) scaleY(-1); }
+  to { -webkit-transform: translateX(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-left {
+  from { -moz-transform: translateX(100%) scaleY(-1); }
+  to { -moz-transform: translateX(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-left {
+  from { transform: translateX(100%) scaleY(-1); }
+  to { transform: translateX(0) scaleY(-1); opacity: 1; }
+}
 .column-chart .plot-container [data-cp-size="0"] {
   height: 0%;
 }
@@ -1315,3 +1709,108 @@
 .scatter-plot .plot-container [data-cp-y="100"] {
   bottom: 100%;
 }
+.plot-container[data-cp-animation] [data-cp-timing="0"] {
+  -webkit-animation-delay: 0s;
+  -moz-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="1"] {
+  -webkit-animation-delay: 0.1s;
+  -moz-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="2"] {
+  -webkit-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="3"] {
+  -webkit-animation-delay: 0.3s;
+  -moz-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="4"] {
+  -webkit-animation-delay: 0.4s;
+  -moz-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="5"] {
+  -webkit-animation-delay: 0.5s;
+  -moz-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="6"] {
+  -webkit-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="7"] {
+  -webkit-animation-delay: 0.7s;
+  -moz-animation-delay: 0.7s;
+  animation-delay: 0.7s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="8"] {
+  -webkit-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="9"] {
+  -webkit-animation-delay: 0.9s;
+  -moz-animation-delay: 0.9s;
+  animation-delay: 0.9s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="10"] {
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="11"] {
+  -webkit-animation-delay: 1.1s;
+  -moz-animation-delay: 1.1s;
+  animation-delay: 1.1s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="12"] {
+  -webkit-animation-delay: 1.2s;
+  -moz-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="13"] {
+  -webkit-animation-delay: 1.3s;
+  -moz-animation-delay: 1.3s;
+  animation-delay: 1.3s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="14"] {
+  -webkit-animation-delay: 1.4s;
+  -moz-animation-delay: 1.4s;
+  animation-delay: 1.4s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="15"] {
+  -webkit-animation-delay: 1.5s;
+  -moz-animation-delay: 1.5s;
+  animation-delay: 1.5s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="16"] {
+  -webkit-animation-delay: 1.6s;
+  -moz-animation-delay: 1.6s;
+  animation-delay: 1.6s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="17"] {
+  -webkit-animation-delay: 1.7s;
+  -moz-animation-delay: 1.7s;
+  animation-delay: 1.7s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="18"] {
+  -webkit-animation-delay: 1.8s;
+  -moz-animation-delay: 1.8s;
+  animation-delay: 1.8s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="19"] {
+  -webkit-animation-delay: 1.9s;
+  -moz-animation-delay: 1.9s;
+  animation-delay: 1.9s;
+}
+.plot-container[data-cp-animation] [data-cp-timing="20"] {
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s;
+}
diff --git a/build/cssplot.group.css b/build/cssplot.group.css
index 2af1e22..c77258e 100644
--- a/build/cssplot.group.css
+++ b/build/cssplot.group.css
@@ -1,32 +1,32 @@
-.group-by-gender .male {
+.group-by [data-group="male"] {
   background: #3498db;
   color: #ffffff;
 }
-.group-by-gender .female {
+.group-by [data-group="female"] {
   background: #ff6699;
   color: #ffffff;
 }
-.group-by-number [data-group="0"] {
+.group-by [data-group="0"] {
   background: #3498db;
   color: #ffffff;
 }
-.group-by-number [data-group="1"] {
+.group-by [data-group="1"] {
   background: #ff6699;
   color: #ffffff;
 }
-.group-by-number [data-group="2"] {
+.group-by [data-group="2"] {
   background: #93b881;
   color: #ffffff;
 }
-.group-by-number [data-group="3"] {
+.group-by [data-group="3"] {
   background: #e09e87;
   color: #ffffff;
 }
-.group-by-number [data-group="4"] {
+.group-by [data-group="4"] {
   background: #a22041;
   color: #ffffff;
 }
-.group-by-number [data-group="5"] {
+.group-by [data-group="5"] {
   background: #95879c;
   color: #ffffff;
 }
diff --git a/src/cssplot.full.less b/src/cssplot.full.less
index 271d98c..013d44a 100644
--- a/src/cssplot.full.less
+++ b/src/cssplot.full.less
@@ -1,3 +1,4 @@
 @import "modules/defaults.less";
 @import "modules/base.less";
+@import "modules/animations.less";
 @import "modules/loops.less";
\ No newline at end of file
diff --git a/src/modules/animations.less b/src/modules/animations.less
new file mode 100644
index 0000000..140ccf0
--- /dev/null
+++ b/src/modules/animations.less
@@ -0,0 +1,387 @@
+.plot-container[data-cp-animation="fade"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-opacity;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-opacity;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-opacity;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow"] > * {
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  transform: scale(0);
+  -webkit-animation-name: chart-grow;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-grow;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-grow;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow-down"] > *,
+.plot-container[data-cp-animation="grow-up"] > * {
+  -webkit-transform: scaleY(0);
+  -moz-transform: scaleY(0);
+  transform: scaleY(0);
+  -webkit-animation-name: chart-grow-y;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-grow-y;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-grow-y;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow-right"] > *,
+.plot-container[data-cp-animation="grow-left"] > * {
+  -webkit-transform: scaleX(0);
+  -moz-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-animation-name: chart-grow-x;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-grow-x;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-grow-x;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="grow-down"] > * {
+	-webkit-transform-origin: center top;
+	-moz-transform-origin: center top;
+	transform-origin: center top;
+}
+.plot-container[data-cp-animation="grow-right"] > * {
+	-webkit-transform-origin: left center;
+	-moz-transform-origin: left center;
+	transform-origin: left center;
+}
+.plot-container[data-cp-animation="grow-up"] > * {
+	-webkit-transform-origin: center bottom;
+	-moz-transform-origin: center bottom;
+	transform-origin: center bottom;
+}
+.plot-container[data-cp-animation="grow-left"] > * {
+	-webkit-transform-origin: right center;
+	-moz-transform-origin: right center;
+	transform-origin: right center;
+}
+.plot-container[data-cp-animation="slide-down"],
+.plot-container[data-cp-animation="slide-right"],
+.plot-container[data-cp-animation="slide-up"],
+.plot-container[data-cp-animation="slide-left"] { overflow: hidden; }
+.plot-container[data-cp-animation="slide-down"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-down;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-down;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-down;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="slide-right"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-right;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-right;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-right;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="slide-up"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-up;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-up;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-up;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.plot-container[data-cp-animation="slide-left"] > * {
+  opacity: 0;
+  -webkit-animation-name: chart-slide-left;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: chart-slide-left;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: chart-slide-left;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+@-webkit-keyframes chart-opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-moz-keyframes chart-opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes chart-opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes chart-grow {
+  from { -webkit-transform: scale(0); }
+  to { -webkit-transform: scale(1); }
+}
+@-moz-keyframes chart-grow {
+  from { -moz-transform: scale(0); }
+  to { -moz-transform: scale(1); }
+}
+@keyframes chart-grow {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
+}
+@-webkit-keyframes chart-grow-x {
+  from { -webkit-transform: scaleX(0); }
+  to { -webkit-transform: scaleX(1); }
+}
+@-moz-keyframes chart-grow-x {
+  from { -moz-transform: scaleX(0); }
+  to { -moz-transform: scaleX(1); }
+}
+@keyframes chart-grow-x {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+@-webkit-keyframes chart-grow-y {
+  from { -webkit-transform: scaleY(0); }
+  to { -webkit-transform: scaleY(1); }
+}
+@-moz-keyframes chart-grow-y {
+  from { -moz-transform: scaleY(0); }
+  to { -moz-transform: scaleY(1); }
+}
+@keyframes chart-grow-y {
+  from { transform: scaleY(0); }
+  to { transform: scaleY(1); }
+}
+@-webkit-keyframes chart-slide-down {
+  from { -webkit-transform: translateY(-100%); }
+  to { -webkit-transform: translateY(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-down {
+  from { -moz-transform: translateY(-100%); }
+  to { -moz-transform: translateY(0); opacity: 1; }
+}
+@keyframes chart-slide-down {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); opacity: 1; }
+}
+@-webkit-keyframes chart-slide-right {
+  from { -webkit-transform: translateX(-100%); }
+  to { -webkit-transform: translateX(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-right {
+  from { -moz-transform: translateX(-100%); }
+  to { -moz-transform: translateX(0); opacity: 1; }
+}
+@keyframes chart-slide-right {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); opacity: 1; }
+}
+@-webkit-keyframes chart-slide-up {
+  from { -webkit-transform: translateY(100%); }
+  to { -webkit-transform: translateY(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-up {
+  from { -moz-transform: translateY(100%); }
+  to { -moz-transform: translateY(0); opacity: 1; }
+}
+@keyframes chart-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); opacity: 1; }
+}
+@-webkit-keyframes chart-slide-left {
+  from { -webkit-transform: translateX(100%); }
+  to { -webkit-transform: translateX(0); opacity: 1; }
+}
+@-moz-keyframes chart-slide-left {
+  from { -moz-transform: translateX(100%); }
+  to { -moz-transform: translateX(0); opacity: 1; }
+}
+@keyframes chart-slide-left {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); opacity: 1; }
+}
+.column-chart.stacked .plot-container[data-cp-animation="grow"] > *{
+  -webkit-animation-name: stacked-column-chart-grow;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-grow;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-grow;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="grow-down"] > *,
+.column-chart.stacked .plot-container[data-cp-animation="grow-up"] > * {
+  -webkit-animation-name: stacked-column-chart-grow-y;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-grow-y;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-grow-y;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="grow-right"] > *,
+.column-chart.stacked .plot-container[data-cp-animation="grow-left"] > * {
+  -webkit-animation-name: stacked-column-chart-grow-x;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: tacked-column-chart-grow-x;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-grow-x;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-down"] > * {;
+  -webkit-animation-name: stacked-column-chart-slide-down;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-down;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-down;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-right"] > * {;
+  -webkit-animation-name: stacked-column-chart-slide-right;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-right;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-right;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-up"] > * {
+  -webkit-animation-name: stacked-column-chart-slide-up;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-up;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-up;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+.column-chart.stacked .plot-container[data-cp-animation="slide-left"] > * {
+  -webkit-animation-name: stacked-column-chart-slide-left;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-name: stacked-column-chart-slide-left;
+  -moz-animation-duration: 1s;
+  -moz-animation-fill-mode: forwards;
+  animation-name: stacked-column-chart-slide-left;
+  animation-duration: 1s;
+  animation-fill-mode:; forwards;
+}
+@-webkit-keyframes stacked-column-chart-grow {
+  from { -webkit-transform: scaleX(0) scaleY(0); }
+  to { -webkit-transform: scaleX(1) scaleY(-1); }
+}
+@-moz-keyframes stacked-column-chart-grow {
+  from { -moz-transform: scaleX(0) scaleY(0); }
+  to { -moz-transform: scaleX(1) scaleY(-1); }
+}
+@keyframes stacked-column-chart-grow {
+  from { transform: scaleX(0) scaleY(0); }
+  to { transform: scaleX(1) scaleY(-1); }
+}
+@-webkit-keyframes stacked-column-chart-grow-x {
+  from { -webkit-transform: scaleX(0) scaleY(-1); }
+  to { -webkit-transform: scaleX(1) scaleY(-1); }
+}
+@-moz-keyframes stacked-column-chart-grow-x {
+  from { -moz-transform: scaleX(0) scaleY(-1); }
+  to { -moz-transform: scaleX(1) scaleY(-1); }
+}
+@keyframes stacked-column-chart-grow-x {
+  from { transform: scaleX(0) scaleY(-1); }
+  to { transform: scaleX(1) scaleY(-1); }
+}
+@-webkit-keyframes stacked-column-chart-grow-y {
+  from { -webkit-transform: scaleY(0) translateY(100%); }
+  to { -webkit-transform: scaleY(-1) translateY(100%); }
+}
+@-moz-keyframes stacked-column-chart-grow-y {
+  from { -moz-transform: scaleY(0) translateY(100%); }
+  to { -moz-transform: scaleY(-1) translateY(100%); }
+}
+@keyframes stacked-column-chart-grow-y {
+  from { transform: scaleY(0) translateY(100%); }
+  to { transform: scaleY(-1) translateY(100%); }
+}
+@-webkit-keyframes stacked-column-chart-slide-down {
+  from { -webkit-transform: translateY(-100%) scaleY(-1); }
+  to { -webkit-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-down {
+  from { -moz-transform: translateY(-100%) scaleY(-1); }
+  to { -moz-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-down {
+  from { transform: translateY(-100%) scaleY(-1); }
+  to { transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-webkit-keyframes stacked-column-chart-slide-down {
+  from { -webkit-transform: translateY(-100%) scaleY(-1); }
+  to { -webkit-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-down {
+  from { -moz-transform: translateY(-100%) scaleY(-1); }
+  to { -moz-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-right {
+  from { transform: translateX(-100%) scaleY(-1); }
+  to { transform: translateX(0) scaleY(-1); opacity: 1; }
+}
+@-webkit-keyframes stacked-column-chart-slide-up {
+  from { -webkit-transform: translateY(100%) scaleY(-1); }
+  to { -webkit-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-up {
+  from { -moz-transform: translateY(100%) scaleY(-1); }
+  to { -moz-transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-up {
+  from { transform: translateY(100%) scaleY(-1); }
+  to { transform: translateY(0) scaleY(-1); opacity: 1; }
+}
+@-webkit-keyframes stacked-column-chart-slide-left {
+  from { -webkit-transform: translateX(100%) scaleY(-1); }
+  to { -webkit-transform: translateX(0) scaleY(-1); opacity: 1; }
+}
+@-moz-keyframes stacked-column-chart-slide-left {
+  from { -moz-transform: translateX(100%) scaleY(-1); }
+  to { -moz-transform: translateX(0) scaleY(-1); opacity: 1; }
+}
+@keyframes stacked-column-chart-slide-left {
+  from { transform: translateX(100%) scaleY(-1); }
+  to { transform: translateX(0) scaleY(-1); opacity: 1; }
+}
\ No newline at end of file
diff --git a/src/modules/base.less b/src/modules/base.less
index fa3538b..a92fc56 100644
--- a/src/modules/base.less
+++ b/src/modules/base.less
@@ -10,17 +10,22 @@
 .bar-chart .chart-row,
 .column-chart [data-cp-size],
 .bar-chart [data-cp-size],
-.plot-container > * > * {
+.stacked .plot-container > * {
   list-style: none;
   border: 1px solid #ffffff;
 }
 
+.stacked .plot-container > * > * { border: none; }
+
 .column-chart .plot-container {
     display: -webkit-flex;
+    display: -moz-flex;
     display: flex;
     -webkit-flex-direction: row;
+    -moz-flex-direction: row;
     flex-direction: row;
     -webkit-flex-wrap: nowrap;
+    -moz-flex-wrap: nowrap;
     flex-wrap: nowrap;
     position: absolute;
     text-align: center;
@@ -30,29 +35,28 @@
     min-height: 100px;
 }
 
-.column-chart.stacked > * > * {
-  height: 100%;
+.column-chart.stacked .plot-container.group-by > * { height: 100%; }
+.column-chart.stacked .plot-container.group-by:not([data-cp-animation]) > *,
+.column-chart.stacked .plot-container.group-by[data-cp-animation="fade"] > * {
   -webkit-transform: scaleY(-1);
-     -moz-transform: scaleY(-1);
-       -o-transform: scaleY(-1);
-      -ms-transform: scaleY(-1);
-          transform: scaleY(-1);
+  -moz-transform: scaleY(-1);
+  transform: scaleY(-1);
 }
 
-.column-chart.stacked .group-by-number [data-cp-size] {
+.column-chart.stacked .plot-container.group-by [data-cp-size] {
   -webkit-transform: scaleY(-1);
-     -moz-transform: scaleY(-1);
-       -o-transform: scaleY(-1);
-      -ms-transform: scaleY(-1);
-          transform: scaleY(-1);
+  -moz-transform: scaleY(-1);
+  transform: scaleY(-1);
 }
 
 .column-chart .chart-column,
 .column-chart [data-cp-size],
 .column-chart.stacked > * > * {
     -webkit-flex-grow: 1;
+    -moz-flex-grow: 1;
     flex-grow: 1;
     -webkit-align-self: flex-end;
+    -moz-align-self: flex-end;
     align-self: flex-end;
 }
 
@@ -70,6 +74,8 @@
 }
 
 .bar-chart .plot-container {
+    -webkit-flex-direction: row;
+    -moz-flex-direction: row;
     flex-direction: row;
     padding: 0;
     margin: 0;
@@ -82,10 +88,12 @@
 }
 
 .bar-chart.stacked > * > * {
+  display: -webkit-flex;
+  display: -moz-flex;
   display: flex;
 }
 
-.bar-chart.stacked .group-by-number [data-cp-size] {
+.bar-chart.stacked .group-by [data-cp-size] {
   display: inline-block;
 }
 
diff --git a/src/modules/group.less b/src/modules/group.less
index 44d8384..ab1f418 100644
--- a/src/modules/group.less
+++ b/src/modules/group.less
@@ -1,16 +1,14 @@
-.group-by-gender {
-    .male {
+.group-by {
+    [data-group="male"] {
         background: @chart-primary-color;
         color: @chart-primary-label-color;
     }
 
-    .female {
+    [data-group="female"] {
         background: @chart-secondary-color;
         color: @chart-secondary-label-color;
     }
-}
 
-.group-by-number {
     [data-group="0"] {
         background: @chart-primary-color;
         color: @chart-primary-label-color;
diff --git a/src/modules/loops.less b/src/modules/loops.less
index 06b60e0..0fab31e 100644
--- a/src/modules/loops.less
+++ b/src/modules/loops.less
@@ -1,4 +1,3 @@
-
 .height_loop(@percent_counter) when (@percent_counter >= 0) {
   .height_loop((@percent_counter - 1));
   [data-cp-size="@{percent_counter}"] { height: ~"@{percent_counter}%"; };
@@ -19,6 +18,15 @@
   [data-cp-y="@{percent_counter}"] { bottom: ~"@{percent_counter}%"; };
 }
 
+.timing_loop(@time_counter) when (@time_counter >= 0) {
+  .timing_loop((@time_counter - 1));
+  [data-cp-timing="@{time_counter}"] {
+    -webkit-animation-delay: round(@time_counter * 0.1s, 1);
+    -moz-animation-delay: round(@time_counter * 0.1s, 1);
+    animation-delay: round(@time_counter * 0.1s, 1);
+  };
+}
+
 .column-chart .plot-container {
   .height_loop(100);
 }
@@ -31,3 +39,7 @@
   .x_loop(100);
   .y_loop(100);
 }
+
+.plot-container[data-cp-animation] {
+  .timing_loop(20);
+}