From 4e56ad2260f4ea15b0dc59df7e8e64c166ac97d3 Mon Sep 17 00:00:00 2001 From: Devin Rousso Date: Thu, 20 Nov 2014 16:24:52 -0800 Subject: [PATCH 1/5] Added basic animations --- build/cssplot.full.css | 208 +++++++++++++++++++++++++++++++++++- src/cssplot.full.less | 1 + src/modules/animations.less | 121 +++++++++++++++++++++ src/modules/loops.less | 13 ++- 4 files changed, 341 insertions(+), 2 deletions(-) create mode 100644 src/modules/animations.less diff --git a/build/cssplot.full.css b/build/cssplot.full.css index 5f347fa..bd81a63 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.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; @@ -103,6 +104,127 @@ border: 6px solid #3498db; border-radius: 100%; } +.plot-container[data-cp-animation="fade"] > * { + opacity: 0; + -webkit-animation: chart-opacity 1s ease forwards; + animation: chart-opacity 1s ease forwards; +} +.plot-container[data-cp-animation="grow"] > * { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-animation: chart-grow 1s forwards; + animation: chart-grow 1s forwards; +} +.plot-container[data-cp-animation="grow-down"] > *, +.plot-container[data-cp-animation="grow-up"] > * { + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-animation: chart-grow-y 1s forwards; + animation: chart-grow-y 1s forwards; +} +.plot-container[data-cp-animation="grow-right"] > *, +.plot-container[data-cp-animation="grow-left"] > * { + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-animation: chart-grow-x 1s forwards; + animation: chart-grow-x 1s forwards; +} +.plot-container[data-cp-animation="grow-down"] > * { transform-origin: center top; } +.plot-container[data-cp-animation="grow-right"] > * { transform-origin: left center; } +.plot-container[data-cp-animation="grow-up"] > * { transform-origin: center bottom; } +.plot-container[data-cp-animation="grow-left"] > * { 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"] > * { + transform: translateY(-100%); + opacity: 0; + -webkit-animation: chart-slide-down 1s forwards; + animation: chart-slide-down 1s forwards; +} +.plot-container[data-cp-animation="slide-right"] > * { + transform: translateX(-100%); + opacity: 0; + -webkit-animation: chart-slide-right 1s forwards; + animation: chart-slide-right 1s forwards; +} +.plot-container[data-cp-animation="slide-up"] > * { + transform: translateY(100%); + opacity: 0; + -webkit-animation: chart-slide-up 1s forwards; + animation: chart-slide-up 1s forwards; +} +.plot-container[data-cp-animation="slide-left"] > * { + transform: translateX(100%); + opacity: 0; + -webkit-animation: chart-slide-left 1s forwards; + animation: chart-slide-left 1s forwards; +} +@-webkit-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); } +} +@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); } +} +@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); } +} +@keyframes chart-grow-y { + from { transform: scaleY(0); } + to { transform: scaleY(1); } +} +@-webkit-keyframes chart-slide-down { + from { transform: translateY(-100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@keyframes chart-slide-down { + from { transform: translateY(-100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@-webkit-keyframes chart-slide-right { + from { transform: translateX(-100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +@keyframes chart-slide-right { + from { transform: translateX(-100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +@-webkit-keyframes chart-slide-up { + from { transform: translateY(100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@keyframes chart-slide-up { + from { transform: translateY(100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@-webkit-keyframes chart-slide-left { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +@keyframes chart-slide-left { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} .column-chart .plot-container [data-cp-size="0"] { height: 0%; } @@ -1315,3 +1437,87 @@ .scatter-plot .plot-container [data-cp-y="100"] { bottom: 100%; } +.plot-container [data-cp-timing="0"] { + -webkit-animation-delay: 0s !important; + animation-delay: 0s !important; +} +.plot-container [data-cp-timing="1"] { + -webkit-animation-delay: 0.1s !important; + animation-delay: 0.1s !important; +} +.plot-container [data-cp-timing="2"] { + -webkit-animation-delay: 0.2s !important; + animation-delay: 0.2s !important; +} +.plot-container [data-cp-timing="3"] { + -webkit-animation-delay: 0.3s !important; + animation-delay: 0.3s !important; +} +.plot-container [data-cp-timing="4"] { + -webkit-animation-delay: 0.4s !important; + animation-delay: 0.4s !important; +} +.plot-container [data-cp-timing="5"] { + -webkit-animation-delay: 0.5s !important; + animation-delay: 0.5s !important; +} +.plot-container [data-cp-timing="6"] { + -webkit-animation-delay: 0.6s !important; + animation-delay: 0.6s !important; +} +.plot-container [data-cp-timing="7"] { + -webkit-animation-delay: 0.7s !important; + animation-delay: 0.7s !important; +} +.plot-container [data-cp-timing="8"] { + -webkit-animation-delay: 0.8s !important; + animation-delay: 0.8s !important; +} +.plot-container [data-cp-timing="9"] { + -webkit-animation-delay: 0.9s !important; + animation-delay: 0.9s !important; +} +.plot-container [data-cp-timing="10"] { + -webkit-animation-delay: 1s !important; + animation-delay: 1s !important; +} +.plot-container [data-cp-timing="11"] { + -webkit-animation-delay: 1.1s !important; + animation-delay: 1.1s !important; +} +.plot-container [data-cp-timing="12"] { + -webkit-animation-delay: 1.2s !important; + animation-delay: 1.2s !important; +} +.plot-container [data-cp-timing="13"] { + -webkit-animation-delay: 1.3s !important; + animation-delay: 1.3s !important; +} +.plot-container [data-cp-timing="14"] { + -webkit-animation-delay: 1.4s !important; + animation-delay: 1.4s !important; +} +.plot-container [data-cp-timing="15"] { + -webkit-animation-delay: 1.5s !important; + animation-delay: 1.5s !important; +} +.plot-container [data-cp-timing="16"] { + -webkit-animation-delay: 1.6s !important; + animation-delay: 1.6s !important; +} +.plot-container [data-cp-timing="17"] { + -webkit-animation-delay: 1.7s !important; + animation-delay: 1.7s !important; +} +.plot-container [data-cp-timing="18"] { + -webkit-animation-delay: 1.8s !important; + animation-delay: 1.8s !important; +} +.plot-container [data-cp-timing="19"] { + -webkit-animation-delay: 1.9s !important; + animation-delay: 1.9s !important; +} +.plot-container [data-cp-timing="20"] { + -webkit-animation-delay: 2s !important; + animation-delay: 2s !important; +} 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..a7d3985 --- /dev/null +++ b/src/modules/animations.less @@ -0,0 +1,121 @@ +.plot-container[data-cp-animation="fade"] > * { + opacity: 0; + -webkit-animation: chart-opacity 1s ease forwards; + animation: chart-opacity 1s ease forwards; +} +.plot-container[data-cp-animation="grow"] > * { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-animation: chart-grow 1s forwards; + animation: chart-grow 1s forwards; +} +.plot-container[data-cp-animation="grow-down"] > *, +.plot-container[data-cp-animation="grow-up"] > * { + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-animation: chart-grow-y 1s forwards; + animation: chart-grow-y 1s forwards; +} +.plot-container[data-cp-animation="grow-right"] > *, +.plot-container[data-cp-animation="grow-left"] > * { + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-animation: chart-grow-x 1s forwards; + animation: chart-grow-x 1s forwards; +} +.plot-container[data-cp-animation="grow-down"] > * { transform-origin: center top; } +.plot-container[data-cp-animation="grow-right"] > * { transform-origin: left center; } +.plot-container[data-cp-animation="grow-up"] > * { transform-origin: center bottom; } +.plot-container[data-cp-animation="grow-left"] > * { 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"] > * { + transform: translateY(-100%); + opacity: 0; + -webkit-animation: chart-slide-down 1s forwards; + animation: chart-slide-down 1s forwards; +} +.plot-container[data-cp-animation="slide-right"] > * { + transform: translateX(-100%); + opacity: 0; + -webkit-animation: chart-slide-right 1s forwards; + animation: chart-slide-right 1s forwards; +} +.plot-container[data-cp-animation="slide-up"] > * { + transform: translateY(100%); + opacity: 0; + -webkit-animation: chart-slide-up 1s forwards; + animation: chart-slide-up 1s forwards; +} +.plot-container[data-cp-animation="slide-left"] > * { + transform: translateX(100%); + opacity: 0; + -webkit-animation: chart-slide-left 1s forwards; + animation: chart-slide-left 1s forwards; +} +@-webkit-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); } +} +@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); } +} +@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); } +} +@keyframes chart-grow-y { + from { transform: scaleY(0); } + to { transform: scaleY(1); } +} +@-webkit-keyframes chart-slide-down { + from { transform: translateY(-100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@keyframes chart-slide-down { + from { transform: translateY(-100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@-webkit-keyframes chart-slide-right { + from { transform: translateX(-100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +@keyframes chart-slide-right { + from { transform: translateX(-100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +@-webkit-keyframes chart-slide-up { + from { transform: translateY(100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@keyframes chart-slide-up { + from { transform: translateY(100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} +@-webkit-keyframes chart-slide-left { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +@keyframes chart-slide-left { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} \ No newline at end of file diff --git a/src/modules/loops.less b/src/modules/loops.less index 06b60e0..5fd355c 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,14 @@ [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) + !important; + animation-delay: round(@time_counter * 0.1s, 1) + !important; + }; +} + .column-chart .plot-container { .height_loop(100); } @@ -31,3 +38,7 @@ .x_loop(100); .y_loop(100); } + +.plot-container { + .timing_loop(20); +} From e7969a8b01c507bca8fdc3417752d1398509c967 Mon Sep 17 00:00:00 2001 From: Devin Rousso Date: Fri, 21 Nov 2014 09:39:33 -0800 Subject: [PATCH 2/5] Unified grouping types --- build/cssplot.full.css | 4 ++-- build/cssplot.group.css | 16 ++++++++-------- src/modules/group.less | 8 +++----- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/build/cssplot.full.css b/build/cssplot.full.css index bd81a63..220b884 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.css @@ -41,7 +41,7 @@ -ms-transform: scaleY(-1); transform: scaleY(-1); } -.column-chart.stacked .group-by-number [data-cp-size] { +.column-chart.stacked .group-by [data-cp-size] { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1); @@ -80,7 +80,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.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/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; From be7fcfbe89f3b210cbb9eb1844254eb1482b5bb8 Mon Sep 17 00:00:00 2001 From: Devin Rousso Date: Fri, 21 Nov 2014 16:28:46 -0800 Subject: [PATCH 3/5] Removed Extraneous Code --- build/cssplot.full.css | 146 ++++++++++++++++++------------------ src/modules/animations.less | 20 ++--- src/modules/loops.less | 6 +- 3 files changed, 82 insertions(+), 90 deletions(-) diff --git a/build/cssplot.full.css b/build/cssplot.full.css index 220b884..2c97612 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.css @@ -138,25 +138,21 @@ .plot-container[data-cp-animation="slide-up"], .plot-container[data-cp-animation="slide-left"] { overflow: hidden; } .plot-container[data-cp-animation="slide-down"] > * { - transform: translateY(-100%); opacity: 0; -webkit-animation: chart-slide-down 1s forwards; animation: chart-slide-down 1s forwards; } .plot-container[data-cp-animation="slide-right"] > * { - transform: translateX(-100%); opacity: 0; -webkit-animation: chart-slide-right 1s forwards; animation: chart-slide-right 1s forwards; } .plot-container[data-cp-animation="slide-up"] > * { - transform: translateY(100%); opacity: 0; -webkit-animation: chart-slide-up 1s forwards; animation: chart-slide-up 1s forwards; } .plot-container[data-cp-animation="slide-left"] > * { - transform: translateX(100%); opacity: 0; -webkit-animation: chart-slide-left 1s forwards; animation: chart-slide-left 1s forwards; @@ -194,35 +190,35 @@ to { transform: scaleY(1); } } @-webkit-keyframes chart-slide-down { - from { transform: translateY(-100%); opacity: 0; } + from { transform: translateY(-100%); } to { transform: translateY(0); opacity: 1; } } @keyframes chart-slide-down { - from { transform: translateY(-100%); opacity: 0; } + from { transform: translateY(-100%); } to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes chart-slide-right { - from { transform: translateX(-100%); opacity: 0; } + from { transform: translateX(-100%); } to { transform: translateX(0); opacity: 1; } } @keyframes chart-slide-right { - from { transform: translateX(-100%); opacity: 0; } + from { transform: translateX(-100%); } to { transform: translateX(0); opacity: 1; } } @-webkit-keyframes chart-slide-up { - from { transform: translateY(100%); opacity: 0; } + from { transform: translateY(100%); } to { transform: translateY(0); opacity: 1; } } @keyframes chart-slide-up { - from { transform: translateY(100%); opacity: 0; } + from { transform: translateY(100%); } to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes chart-slide-left { - from { transform: translateX(100%); opacity: 0; } + from { transform: translateX(100%); } to { transform: translateX(0); opacity: 1; } } @keyframes chart-slide-left { - from { transform: translateX(100%); opacity: 0; } + from { transform: translateX(100%); } to { transform: translateX(0); opacity: 1; } } .column-chart .plot-container [data-cp-size="0"] { @@ -1437,87 +1433,87 @@ .scatter-plot .plot-container [data-cp-y="100"] { bottom: 100%; } -.plot-container [data-cp-timing="0"] { - -webkit-animation-delay: 0s !important; - animation-delay: 0s !important; +.plot-container[data-cp-animation] [data-cp-timing="0"] { + -webkit-animation-delay: 0s; + animation-delay: 0s; } -.plot-container [data-cp-timing="1"] { - -webkit-animation-delay: 0.1s !important; - animation-delay: 0.1s !important; +.plot-container[data-cp-animation] [data-cp-timing="1"] { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } -.plot-container [data-cp-timing="2"] { - -webkit-animation-delay: 0.2s !important; - animation-delay: 0.2s !important; +.plot-container[data-cp-animation] [data-cp-timing="2"] { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } -.plot-container [data-cp-timing="3"] { - -webkit-animation-delay: 0.3s !important; - animation-delay: 0.3s !important; +.plot-container[data-cp-animation] [data-cp-timing="3"] { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } -.plot-container [data-cp-timing="4"] { - -webkit-animation-delay: 0.4s !important; - animation-delay: 0.4s !important; +.plot-container[data-cp-animation] [data-cp-timing="4"] { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; } -.plot-container [data-cp-timing="5"] { - -webkit-animation-delay: 0.5s !important; - animation-delay: 0.5s !important; +.plot-container[data-cp-animation] [data-cp-timing="5"] { + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; } -.plot-container [data-cp-timing="6"] { - -webkit-animation-delay: 0.6s !important; - animation-delay: 0.6s !important; +.plot-container[data-cp-animation] [data-cp-timing="6"] { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; } -.plot-container [data-cp-timing="7"] { - -webkit-animation-delay: 0.7s !important; - animation-delay: 0.7s !important; +.plot-container[data-cp-animation] [data-cp-timing="7"] { + -webkit-animation-delay: 0.7s; + animation-delay: 0.7s; } -.plot-container [data-cp-timing="8"] { - -webkit-animation-delay: 0.8s !important; - animation-delay: 0.8s !important; +.plot-container[data-cp-animation] [data-cp-timing="8"] { + -webkit-animation-delay: 0.8s; + animation-delay: 0.8s; } -.plot-container [data-cp-timing="9"] { - -webkit-animation-delay: 0.9s !important; - animation-delay: 0.9s !important; +.plot-container[data-cp-animation] [data-cp-timing="9"] { + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; } -.plot-container [data-cp-timing="10"] { - -webkit-animation-delay: 1s !important; - animation-delay: 1s !important; +.plot-container[data-cp-animation] [data-cp-timing="10"] { + -webkit-animation-delay: 1s; + animation-delay: 1s; } -.plot-container [data-cp-timing="11"] { - -webkit-animation-delay: 1.1s !important; - animation-delay: 1.1s !important; +.plot-container[data-cp-animation] [data-cp-timing="11"] { + -webkit-animation-delay: 1.1s; + animation-delay: 1.1s; } -.plot-container [data-cp-timing="12"] { - -webkit-animation-delay: 1.2s !important; - animation-delay: 1.2s !important; +.plot-container[data-cp-animation] [data-cp-timing="12"] { + -webkit-animation-delay: 1.2s; + animation-delay: 1.2s; } -.plot-container [data-cp-timing="13"] { - -webkit-animation-delay: 1.3s !important; - animation-delay: 1.3s !important; +.plot-container[data-cp-animation] [data-cp-timing="13"] { + -webkit-animation-delay: 1.3s; + animation-delay: 1.3s; } -.plot-container [data-cp-timing="14"] { - -webkit-animation-delay: 1.4s !important; - animation-delay: 1.4s !important; +.plot-container[data-cp-animation] [data-cp-timing="14"] { + -webkit-animation-delay: 1.4s; + animation-delay: 1.4s; } -.plot-container [data-cp-timing="15"] { - -webkit-animation-delay: 1.5s !important; - animation-delay: 1.5s !important; +.plot-container[data-cp-animation] [data-cp-timing="15"] { + -webkit-animation-delay: 1.5s; + animation-delay: 1.5s; } -.plot-container [data-cp-timing="16"] { - -webkit-animation-delay: 1.6s !important; - animation-delay: 1.6s !important; +.plot-container[data-cp-animation] [data-cp-timing="16"] { + -webkit-animation-delay: 1.6s; + animation-delay: 1.6s; } -.plot-container [data-cp-timing="17"] { - -webkit-animation-delay: 1.7s !important; - animation-delay: 1.7s !important; +.plot-container[data-cp-animation] [data-cp-timing="17"] { + -webkit-animation-delay: 1.7s; + animation-delay: 1.7s; } -.plot-container [data-cp-timing="18"] { - -webkit-animation-delay: 1.8s !important; - animation-delay: 1.8s !important; +.plot-container[data-cp-animation] [data-cp-timing="18"] { + -webkit-animation-delay: 1.8s; + animation-delay: 1.8s; } -.plot-container [data-cp-timing="19"] { - -webkit-animation-delay: 1.9s !important; - animation-delay: 1.9s !important; +.plot-container[data-cp-animation] [data-cp-timing="19"] { + -webkit-animation-delay: 1.9s; + animation-delay: 1.9s; } -.plot-container [data-cp-timing="20"] { - -webkit-animation-delay: 2s !important; - animation-delay: 2s !important; +.plot-container[data-cp-animation] [data-cp-timing="20"] { + -webkit-animation-delay: 2s; + animation-delay: 2s; } diff --git a/src/modules/animations.less b/src/modules/animations.less index a7d3985..9fdc6bd 100644 --- a/src/modules/animations.less +++ b/src/modules/animations.less @@ -32,25 +32,21 @@ .plot-container[data-cp-animation="slide-up"], .plot-container[data-cp-animation="slide-left"] { overflow: hidden; } .plot-container[data-cp-animation="slide-down"] > * { - transform: translateY(-100%); opacity: 0; -webkit-animation: chart-slide-down 1s forwards; animation: chart-slide-down 1s forwards; } .plot-container[data-cp-animation="slide-right"] > * { - transform: translateX(-100%); opacity: 0; -webkit-animation: chart-slide-right 1s forwards; animation: chart-slide-right 1s forwards; } .plot-container[data-cp-animation="slide-up"] > * { - transform: translateY(100%); opacity: 0; -webkit-animation: chart-slide-up 1s forwards; animation: chart-slide-up 1s forwards; } .plot-container[data-cp-animation="slide-left"] > * { - transform: translateX(100%); opacity: 0; -webkit-animation: chart-slide-left 1s forwards; animation: chart-slide-left 1s forwards; @@ -88,34 +84,34 @@ to { transform: scaleY(1); } } @-webkit-keyframes chart-slide-down { - from { transform: translateY(-100%); opacity: 0; } + from { transform: translateY(-100%); } to { transform: translateY(0); opacity: 1; } } @keyframes chart-slide-down { - from { transform: translateY(-100%); opacity: 0; } + from { transform: translateY(-100%); } to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes chart-slide-right { - from { transform: translateX(-100%); opacity: 0; } + from { transform: translateX(-100%); } to { transform: translateX(0); opacity: 1; } } @keyframes chart-slide-right { - from { transform: translateX(-100%); opacity: 0; } + from { transform: translateX(-100%); } to { transform: translateX(0); opacity: 1; } } @-webkit-keyframes chart-slide-up { - from { transform: translateY(100%); opacity: 0; } + from { transform: translateY(100%); } to { transform: translateY(0); opacity: 1; } } @keyframes chart-slide-up { - from { transform: translateY(100%); opacity: 0; } + from { transform: translateY(100%); } to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes chart-slide-left { - from { transform: translateX(100%); opacity: 0; } + from { transform: translateX(100%); } to { transform: translateX(0); opacity: 1; } } @keyframes chart-slide-left { - from { transform: translateX(100%); opacity: 0; } + from { transform: translateX(100%); } to { transform: translateX(0); opacity: 1; } } \ No newline at end of file diff --git a/src/modules/loops.less b/src/modules/loops.less index 5fd355c..de66400 100644 --- a/src/modules/loops.less +++ b/src/modules/loops.less @@ -21,8 +21,8 @@ .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) + !important; - animation-delay: round(@time_counter * 0.1s, 1) + !important; + -webkit-animation-delay: round(@time_counter * 0.1s, 1); + animation-delay: round(@time_counter * 0.1s, 1); }; } @@ -39,6 +39,6 @@ .y_loop(100); } -.plot-container { +.plot-container[data-cp-animation] { .timing_loop(20); } From e04f271c0a46deeffe670325803f18fdc59d60e3 Mon Sep 17 00:00:00 2001 From: Devin Rousso Date: Sat, 22 Nov 2014 00:07:32 -0800 Subject: [PATCH 4/5] Added Animation support for Stacked Column Charts --- build/cssplot.base.css | 12 ++- build/cssplot.full.css | 185 ++++++++++++++++++++++++++++++++---- src/modules/animations.less | 178 ++++++++++++++++++++++++++++++---- src/modules/base.less | 12 ++- 4 files changed, 342 insertions(+), 45 deletions(-) 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 2c97612..fb9a309 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.css @@ -33,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 [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); @@ -106,28 +107,44 @@ } .plot-container[data-cp-animation="fade"] > * { opacity: 0; - -webkit-animation: chart-opacity 1s ease forwards; - animation: chart-opacity 1s ease forwards; + -webkit-animation-name: chart-opacity; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-opacity; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="grow"] > * { -webkit-transform: scale(0); transform: scale(0); - -webkit-animation: chart-grow 1s forwards; - animation: chart-grow 1s forwards; + -webkit-animation-name: chart-grow; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: 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); transform: scaleY(0); - -webkit-animation: chart-grow-y 1s forwards; - animation: chart-grow-y 1s forwards; + -webkit-animation-name: chart-grow-y; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: 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); transform: scaleX(0); - -webkit-animation: chart-grow-x 1s forwards; - animation: chart-grow-x 1s forwards; + -webkit-animation-name: chart-grow-x; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-grow-x; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="grow-down"] > * { transform-origin: center top; } .plot-container[data-cp-animation="grow-right"] > * { transform-origin: left center; } @@ -139,23 +156,39 @@ .plot-container[data-cp-animation="slide-left"] { overflow: hidden; } .plot-container[data-cp-animation="slide-down"] > * { opacity: 0; - -webkit-animation: chart-slide-down 1s forwards; - animation: chart-slide-down 1s forwards; + -webkit-animation-name: chart-slide-down; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-down; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="slide-right"] > * { opacity: 0; - -webkit-animation: chart-slide-right 1s forwards; - animation: chart-slide-right 1s forwards; + -webkit-animation-name: chart-slide-right; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-right; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="slide-up"] > * { opacity: 0; - -webkit-animation: chart-slide-up 1s forwards; - animation: chart-slide-up 1s forwards; + -webkit-animation-name: chart-slide-up; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-up; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="slide-left"] > * { opacity: 0; - -webkit-animation: chart-slide-left 1s forwards; - animation: chart-slide-left 1s forwards; + -webkit-animation-name: chart-slide-left; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-left; + animation-duration: 1s; + animation-fill-mode:; forwards; } @-webkit-keyframes chart-opacity { from { opacity: 0; } @@ -221,6 +254,120 @@ 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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); } +} +@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); } +} +@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%); } +} +@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 { transform: translateY(-100%) scaleY(-1); } + to { 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-right { + from { transform: translateX(-100%) scaleY(-1); } + to { transform: translateX(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 { transform: translateY(100%) scaleY(-1); } + to { 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 { transform: translateX(100%) scaleY(-1); } + to { 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%; } diff --git a/src/modules/animations.less b/src/modules/animations.less index 9fdc6bd..ce4b9b7 100644 --- a/src/modules/animations.less +++ b/src/modules/animations.less @@ -1,27 +1,43 @@ .plot-container[data-cp-animation="fade"] > * { opacity: 0; - -webkit-animation: chart-opacity 1s ease forwards; - animation: chart-opacity 1s ease forwards; + -webkit-animation-name: chart-opacity; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-opacity; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="grow"] > * { -webkit-transform: scale(0); transform: scale(0); - -webkit-animation: chart-grow 1s forwards; - animation: chart-grow 1s forwards; + -webkit-animation-name: chart-grow; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: 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); transform: scaleY(0); - -webkit-animation: chart-grow-y 1s forwards; - animation: chart-grow-y 1s forwards; + -webkit-animation-name: chart-grow-y; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: 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); transform: scaleX(0); - -webkit-animation: chart-grow-x 1s forwards; - animation: chart-grow-x 1s forwards; + -webkit-animation-name: chart-grow-x; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-grow-x; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="grow-down"] > * { transform-origin: center top; } .plot-container[data-cp-animation="grow-right"] > * { transform-origin: left center; } @@ -33,23 +49,39 @@ .plot-container[data-cp-animation="slide-left"] { overflow: hidden; } .plot-container[data-cp-animation="slide-down"] > * { opacity: 0; - -webkit-animation: chart-slide-down 1s forwards; - animation: chart-slide-down 1s forwards; + -webkit-animation-name: chart-slide-down; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-down; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="slide-right"] > * { opacity: 0; - -webkit-animation: chart-slide-right 1s forwards; - animation: chart-slide-right 1s forwards; + -webkit-animation-name: chart-slide-right; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-right; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="slide-up"] > * { opacity: 0; - -webkit-animation: chart-slide-up 1s forwards; - animation: chart-slide-up 1s forwards; + -webkit-animation-name: chart-slide-up; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-up; + animation-duration: 1s; + animation-fill-mode:; forwards; } .plot-container[data-cp-animation="slide-left"] > * { opacity: 0; - -webkit-animation: chart-slide-left 1s forwards; - animation: chart-slide-left 1s forwards; + -webkit-animation-name: chart-slide-left; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: forwards; + animation: chart-slide-left; + animation-duration: 1s; + animation-fill-mode:; forwards; } @-webkit-keyframes chart-opacity { from { opacity: 0; } @@ -114,4 +146,118 @@ @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; + animation: 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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; + animation: 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); } +} +@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); } +} +@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%); } +} +@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 { transform: translateY(-100%) scaleY(-1); } + to { 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-right { + from { transform: translateX(-100%) scaleY(-1); } + to { transform: translateX(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 { transform: translateY(100%) scaleY(-1); } + to { 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 { transform: translateX(100%) scaleY(-1); } + to { 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..86fd2de 100644 --- a/src/modules/base.less +++ b/src/modules/base.less @@ -10,11 +10,13 @@ .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; @@ -30,16 +32,16 @@ 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); From e60bb8197015834a906cec120dc9c71188e8cbfd Mon Sep 17 00:00:00 2001 From: Devin Rousso Date: Sun, 23 Nov 2014 14:19:39 -0800 Subject: [PATCH 5/5] Added Firefox support --- build/cssplot.full.css | 230 +++++++++++++++++++++++++++++------- src/modules/animations.less | 196 ++++++++++++++++++++++++------ src/modules/base.less | 24 ++-- src/modules/loops.less | 1 + 4 files changed, 366 insertions(+), 85 deletions(-) diff --git a/build/cssplot.full.css b/build/cssplot.full.css index fb9a309..6b3e775 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.css @@ -18,10 +18,13 @@ .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; @@ -38,23 +41,21 @@ .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 .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, @@ -69,6 +70,8 @@ clear: both; } .bar-chart .plot-container { + -webkit-flex-direction: row; + -moz-flex-direction: row; flex-direction: row; padding: 0; margin: 0; @@ -79,6 +82,8 @@ min-height: 8px; } .bar-chart.stacked > * > * { + display: -webkit-flex; + display: -moz-flex; display: flex; } .bar-chart.stacked .group-by [data-cp-size] { @@ -110,46 +115,77 @@ -webkit-animation-name: chart-opacity; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-opacity; + -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; - animation: chart-grow; + -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; - animation: chart-grow-y; + -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; - animation: chart-grow-x; + -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"] > * { transform-origin: center top; } -.plot-container[data-cp-animation="grow-right"] > * { transform-origin: left center; } -.plot-container[data-cp-animation="grow-up"] > * { transform-origin: center bottom; } -.plot-container[data-cp-animation="grow-left"] > * { transform-origin: right center; } +.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"], @@ -159,7 +195,10 @@ -webkit-animation-name: chart-slide-down; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-down; + -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; } @@ -168,7 +207,10 @@ -webkit-animation-name: chart-slide-right; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-right; + -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; } @@ -177,7 +219,10 @@ -webkit-animation-name: chart-slide-up; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-up; + -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; } @@ -186,7 +231,10 @@ -webkit-animation-name: chart-slide-left; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-left; + -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; } @@ -194,6 +242,10 @@ 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; } @@ -202,6 +254,10 @@ 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); } @@ -210,6 +266,10 @@ 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); } @@ -218,37 +278,57 @@ 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 { transform: translateY(-100%); } - to { transform: translateY(0); opacity: 1; } + 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 { transform: translateX(-100%); } - to { transform: translateX(0); opacity: 1; } + 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 { transform: translateY(100%); } - to { transform: translateY(0); opacity: 1; } + 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 { transform: translateX(100%); } - to { transform: translateX(0); opacity: 1; } + 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%); } @@ -258,7 +338,10 @@ -webkit-animation-name: stacked-column-chart-grow; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-grow; + -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; } @@ -267,7 +350,10 @@ -webkit-animation-name: stacked-column-chart-grow-y; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-grow-y; + -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; } @@ -276,7 +362,10 @@ -webkit-animation-name: stacked-column-chart-grow-x; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-grow-x; + -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; } @@ -284,7 +373,10 @@ -webkit-animation-name: stacked-column-chart-slide-down; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-down; + -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; } @@ -292,7 +384,10 @@ -webkit-animation-name: stacked-column-chart-slide-right; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-right; + -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; } @@ -300,7 +395,10 @@ -webkit-animation-name: stacked-column-chart-slide-up; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-up; + -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; } @@ -308,7 +406,10 @@ -webkit-animation-name: stacked-column-chart-slide-left; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-left; + -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; } @@ -316,6 +417,10 @@ 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); } @@ -324,6 +429,10 @@ 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); } @@ -332,37 +441,57 @@ 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 { transform: translateY(-100%) scaleY(-1); } - to { transform: translateY(0) scaleY(-1); opacity: 1; } + 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-right { - from { transform: translateX(-100%) scaleY(-1); } - to { transform: translateX(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 { transform: translateY(100%) scaleY(-1); } - to { transform: translateY(0) scaleY(-1); opacity: 1; } + 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 { transform: translateX(100%) scaleY(-1); } - to { transform: translateX(0) scaleY(-1); opacity: 1; } + 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); } @@ -1582,85 +1711,106 @@ } .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/src/modules/animations.less b/src/modules/animations.less index ce4b9b7..140ccf0 100644 --- a/src/modules/animations.less +++ b/src/modules/animations.less @@ -3,46 +3,77 @@ -webkit-animation-name: chart-opacity; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-opacity; + -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; - animation: chart-grow; + -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; - animation: chart-grow-y; + -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; - animation: chart-grow-x; + -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"] > * { transform-origin: center top; } -.plot-container[data-cp-animation="grow-right"] > * { transform-origin: left center; } -.plot-container[data-cp-animation="grow-up"] > * { transform-origin: center bottom; } -.plot-container[data-cp-animation="grow-left"] > * { transform-origin: right center; } +.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"], @@ -52,7 +83,10 @@ -webkit-animation-name: chart-slide-down; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-down; + -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; } @@ -61,7 +95,10 @@ -webkit-animation-name: chart-slide-right; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-right; + -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; } @@ -70,7 +107,10 @@ -webkit-animation-name: chart-slide-up; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-up; + -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; } @@ -79,7 +119,10 @@ -webkit-animation-name: chart-slide-left; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: chart-slide-left; + -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; } @@ -87,6 +130,10 @@ 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; } @@ -95,6 +142,10 @@ 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); } @@ -103,6 +154,10 @@ 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); } @@ -111,37 +166,57 @@ 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 { transform: translateY(-100%); } - to { transform: translateY(0); opacity: 1; } + 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 { transform: translateX(-100%); } - to { transform: translateX(0); opacity: 1; } + 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 { transform: translateY(100%); } - to { transform: translateY(0); opacity: 1; } + 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 { transform: translateX(100%); } - to { transform: translateX(0); opacity: 1; } + 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%); } @@ -151,7 +226,10 @@ -webkit-animation-name: stacked-column-chart-grow; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-grow; + -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; } @@ -160,7 +238,10 @@ -webkit-animation-name: stacked-column-chart-grow-y; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-grow-y; + -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; } @@ -169,7 +250,10 @@ -webkit-animation-name: stacked-column-chart-grow-x; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-grow-x; + -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; } @@ -177,7 +261,10 @@ -webkit-animation-name: stacked-column-chart-slide-down; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-down; + -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; } @@ -185,7 +272,10 @@ -webkit-animation-name: stacked-column-chart-slide-right; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-right; + -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; } @@ -193,7 +283,10 @@ -webkit-animation-name: stacked-column-chart-slide-up; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-up; + -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; } @@ -201,7 +294,10 @@ -webkit-animation-name: stacked-column-chart-slide-left; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; - animation: stacked-column-chart-slide-left; + -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; } @@ -209,6 +305,10 @@ 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); } @@ -217,6 +317,10 @@ 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); } @@ -225,37 +329,57 @@ 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 { transform: translateY(-100%) scaleY(-1); } - to { transform: translateY(0) scaleY(-1); opacity: 1; } + 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-right { - from { transform: translateX(-100%) scaleY(-1); } - to { transform: translateX(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 { transform: translateY(100%) scaleY(-1); } - to { transform: translateY(0) scaleY(-1); opacity: 1; } + 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 { transform: translateX(100%) scaleY(-1); } - to { transform: translateX(0) scaleY(-1); opacity: 1; } + 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); } diff --git a/src/modules/base.less b/src/modules/base.less index 86fd2de..a92fc56 100644 --- a/src/modules/base.less +++ b/src/modules/base.less @@ -19,10 +19,13 @@ .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; @@ -36,25 +39,24 @@ .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 .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; } @@ -72,6 +74,8 @@ } .bar-chart .plot-container { + -webkit-flex-direction: row; + -moz-flex-direction: row; flex-direction: row; padding: 0; margin: 0; @@ -84,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/loops.less b/src/modules/loops.less index de66400..0fab31e 100644 --- a/src/modules/loops.less +++ b/src/modules/loops.less @@ -22,6 +22,7 @@ .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); }; }