open-consul/website/source/assets/stylesheets/consul-connect/_animations.scss

746 lines
15 KiB
SCSS

.g-animation-block {
width: 70%;
margin: 0 auto;
opacity: 0.4;
transition: all 0.5s ease;
&.active {
opacity: 1;
}
}
#configuration-challenge-animation {
& #c-line-8,
& #c-line-7,
& #c-line-6,
& #c-line-5,
& #c-line-4,
& #c-line-3,
& #c-line-2,
& #c-line-1 {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
& #c-box-1,
& #c-box-2,
& #c-box-3,
& #c-box-4,
& #c-box-5,
& #c-box-6,
& #c-box-7,
& #c-box-8 {
opacity: 0.5;
}
& #c-loading-bar > rect:last-child {
width: 0;
}
}
#configuration-solution-animation {
& #s-line-1,
& #s-line-2,
& #s-line-3,
& #s-line-4,
& #s-line-5,
& #s-line-6,
& #s-line-7,
& #s-line-8 {
stroke-dasharray: 58;
stroke-dashoffset: 58;
}
& #s-service-box-1,
& #s-service-box-2,
& #s-service-box-3,
& #s-service-box-4,
& #s-service-box-5,
& #s-service-box-6,
& #s-service-box-7,
& #s-service-box-8 {
opacity: 0.5;
}
& #s-progress-indicator {
width: 0;
}
& #s-dots {
opacity: 0;
}
}
#discovery-challenge-animation {
& #c-box-left-placement {
opacity: 0;
}
& #c-broken-link-left {
opacity: 0;
}
& #c-broken-link-right {
opacity: 0;
}
& #c-computer {
opacity: .12;
}
& #c-computer-to-load-balancers #c-arrow-down {
opacity: 0;
}
& #c-computer-to-load-balancers #c-arrow-right {
opacity: 0;
}
& #c-computer-to-load-balancers #c-arrow-left {
opacity: 0;
}
& #c-computer-to-load-balancers #c-circle {
opacity: 0;
}
& #c-computer-to-load-balancers #c-edit-box {
opacity: 0;
}
& #c-load-balancer-left > #c-progress-bar,
& #c-load-balancer-right > #c-progress-bar-2,
& #c-load-balancer-middle > #c-progress-bar-3 {
opacity: 0;
}
& #c-load-balancer-left > #c-progress-bar > *:last-child,
& #c-load-balancer-right > #c-progress-bar-2 > *:last-child,
& #c-load-balancer-middle > #c-progress-bar-3 > *:last-child {
width: 0;
}
& #c-line-horizontal-right {
stroke-dasharray: 65;
stroke-dashoffset: 65;
}
& #c-line-horizontal-right > line {
stroke: #000;
}
& #c-line-top-right {
stroke-dasharray: 17;
stroke-dashoffset: 17;
}
& #c-line-bottom-right {
stroke-dasharray: 80;
stroke-dashoffset: 80;
}
& #c-line-top-left {
stroke-dasharray: 17;
stroke-dashoffset: 0;
}
& #line-bottom-left {
stroke-dasharray: 56;
stroke-dashoffset: 0;
}
& #c-line-top-left > * {
stroke: #3969ed;
}
& #c-line-bottom-left > * {
stroke: #3969ed;
}
& #c-line-bottom-right > * {
stroke: #000;
}
& #c-box-far-left > path {
fill: #3969ed;
}
}
#discovery-solution-animation {
& #s-active-service-3 {
display: none;
}
& #s-connected-line-2 {
stroke-dasharray: 270;
stroke-dashoffset: 270;
}
& #s-connected-line-1 {
stroke-dasharray: 222;
}
& #s-dotted-line-left {
opacity: 0;
}
& #s-dotted-lines-right {
opacity: 0;
}
& #s-dotted-lines-right > path:last-child {
opacity: 0;
}
& #s-dynamic-sync-right {
opacity: 0;
}
& #s-dynamic-sync-left {
opacity: 0;
}
& #s-dynamic-sync-left > path {
transform-origin: 88px 127px;
}
& #s-dotted-service-box-2 {
opacity: 0;
}
}
#segmentation-challenge-animation {
& #c-firewall-updates #c-update_path {
opacity: 0;
}
& #c-firewall-updates #c-edit {
opacity: 0;
}
& #c-computer {
opacity: 0;
}
& #c-progress-indicator,
& #c-progress-indicator-2,
& #c-progress-indicator-3 {
opacity: 0;
}
& #c-broken-link-1,
& #c-broken-link-2,
& #c-broken-link-3 {
opacity: 0;
}
& #c-box-2,
& #c-box-4,
& #c-box-6 {
opacity: 0;
}
& #c-path-1 > *:nth-child(1) {
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
& #c-path-1 > *:nth-child(2) {
stroke-dasharray: 94;
stroke-dashoffset: 94;
}
& #c-path-1 > *:nth-child(3) {
stroke-dasharray: 102;
stroke-dashoffset: 102;
}
& #c-path-2 > *:nth-child(1) {
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
& #c-path-2 > *:nth-child(2) {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
& #c-path-2 > *:nth-child(3) {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
& #c-path-2 > *:nth-child(3) {
stroke-dasharray: 148;
stroke-dashoffset: 148;
}
& #c-path-3 > *:nth-child(1) {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
& #c-path-3 > *:nth-child(2) {
stroke-dasharray: 54;
stroke-dashoffset: 54;
}
& #c-path-3 > *:nth-child(3) {
stroke-dasharray: 126;
stroke-dashoffset: 126;
}
}
#segmentation-solution-animation {
#s-service-2 {
opacity: 0;
}
#s-service-4 {
opacity: 0;
}
#s-service-6 {
opacity: 0;
}
#s-service-2 > path {
fill: #000;
}
#s-service-4 > path {
fill: #000;
}
#s-service-6 > path {
fill: #000;
}
#s-secure-indicator-2 {
opacity: 0;
}
#s-secure-indicator-4 {
opacity: 0;
}
#s-secure-indicator-6 {
opacity: 0;
}
#s-connection-path-6 {
stroke-dasharray: 161;
stroke-dashoffset: 161;
}
#s-connection-path-5 {
stroke-dasharray: 73;
stroke-dashoffset: 73;
}
#s-connection-path-4 {
stroke-dasharray: 115;
stroke-dashoffset: 115;
}
#s-connection-path-1 {
stroke-dasharray: 16;
stroke-dashoffset: 16;
}
#s-connection-path-2 {
stroke-dasharray: 16;
stroke-dashoffset: 16;
}
#s-connection-path-8 {
stroke-dasharray: 73;
stroke-dashoffset: 73;
}
#s-connection-path-10 {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
#s-connection-path-9 {
stroke-dasharray: 16;
stroke-dashoffset: 16;
}
#s-consul-inbound-paths-lower,
#s-dynamic-update-inbound-lower {
opacity: 0;
}
#s-consul-inbound-paths-upper,
#s-dynamic-update-inbound-upper {
opacity: 0;
}
#s-consul-server-connection-lower,
#s-consul-outbound-5,
#s-consul-outbound-6,
#s-consul-outbound-7 {
opacity: 0;
}
#s-tls-cert-lower,
#s-dynamic-update-outbound-ower {
opacity: 0;
}
#s-consul-server-connection-upper,
#s-consul-outbound-1,
#s-soncul-outbound-2,
#s-consul-outbound-3,
#s-consul-outbound-4 {
opacity: 0;
}
#s-tls-cert-upper,
#s-dynamic-update-outbound-upper {
opacity: 0;
}
}
#index-dynamic-animation {
/* service boxes */
& #aws-box {
opacity: 0;
transform: translateX(57px) translateY(164px);
transition: all 0.5s ease;
transition-delay: 2s;
}
&.active #aws-box {
opacity: 1;
transform: translateX(97px) translateY(144px);
}
& #gcp-box {
opacity: 0;
transform: translateX(-28px) translateY(106px);
transition: all 0.5s ease;
transition-delay: 1.5s;
}
&.active #gcp-box {
opacity: 1;
transform: translateX(0) translateY(92px);
}
& #azure-box {
opacity: 0;
transform: translateX(293px) translateY(116px);
transition: all 0.5s ease;
transition-delay: 2.5s;
}
&.active #azure-box {
opacity: 1;
transform: translateX(263px) translateY(96px);
}
/* connection lines */
& #lines-origin-gcp > *:nth-child(1),
& #dynamic #lines-origin-gcp > *:nth-child(1).off {
stroke-dasharray: 64;
stroke-dashoffset: -64;
}
&.active #lines-origin-gcp > *:nth-child(1) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 1.9s;
}
& #lines-origin-gcp > *:nth-child(2),
& #dynamic #lines-origin-gcp > *:nth-child(2).off {
stroke-dasharray: 106;
stroke-dashoffset: 106;
}
&.active #lines-origin-gcp > *:nth-child(2) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 2s;
}
& #lines-origin-aws > *:nth-child(1),
& #dynamic #lines-origin-aws > *:nth-child(1).off {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
&.active #lines-origin-aws > *:nth-child(1) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 2.5s;
}
& #lines-origin-aws > *:nth-child(2),
& #dynamic #lines-origin-aws > *:nth-child(2).off {
stroke-dasharray: 202;
stroke-dashoffset: 202;
}
&.active #lines-origin-aws > *:nth-child(2) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 2.6s;
}
& #lines-origin-aws > *:nth-child(3),
& #dynamic #lines-origin-aws > *:nth-child(3).off {
stroke-dasharray: 111;
stroke-dashoffset: 111;
}
&.active #lines-origin-aws > *:nth-child(3) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 2.7s;
}
& #lines-origin-aws > *:nth-child(4),
& #dynamic #lines-origin-aws > *:nth-child(4).off {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
&.active #lines-origin-aws > *:nth-child(4) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 2.8s;
}
& #lines-origin-aws > *:nth-child(5),
& #dynamic #lines-origin-aws > *:nth-child(5).off {
stroke-dasharray: 158;
stroke-dashoffset: 158;
}
&.active #lines-origin-aws > *:nth-child(5) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 2.9s;
}
& #lines-origin-azure > *:nth-child(1),
& #dynamic #lines-origin-azure > *:nth-child(1).off {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
&.active #lines-origin-azure > *:nth-child(1) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 3.2s;
}
& #lines-origin-azure > *:nth-child(2),
& #dynamic #lines-origin-azure > *:nth-child(2).off {
stroke-dasharray: 64;
stroke-dashoffset: 64;
}
&.active #lines-origin-azure > *:nth-child(2) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 3.3s;
}
#lines-origin-azure > *:nth-child(3),
& #dynamic #lines-origin-azure > *:nth-child(3).off {
stroke-dasharray: 108;
stroke-dashoffset: 108;
}
&.active #lines-origin-azure > *:nth-child(3) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 3.4s;
}
& #lines-origin-azure > *:nth-child(4),
& #dynamic #lines-origin-azure > *:nth-child(4).off {
stroke-dasharray: 108;
stroke-dashoffset: 108;
}
&.active #lines-origin-azure > *:nth-child(4) {
stroke-dashoffset: 0;
transition: all 0.7s ease;
transition-delay: 3.5s;
}
/* main block boxes */
& #main-box #boxes > *:nth-child(1) {
opacity: 0;
transform: translateX(0px) translateY(28px);
transition: all 0.5s ease;
}
&.active #main-box #boxes > *:nth-child(1) {
opacity: 1;
transform: translateX(0px) translateY(48px);
}
& #main-box #box-shadows > *:nth-child(1) {
opacity: 0;
transition: all 0.7s ease;
}
&.active #main-box #box-shadows > *:nth-child(1) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(2) {
opacity: 0;
transform: translateX(41px) translateY(52px);
transition: all 0.5s ease;
transition-delay: 0.1s;
}
&.active #main-box #boxes > *:nth-child(2) {
opacity: 1;
transform: translateX(41px) translateY(72px);
transition-delay: 0.1s;
}
& #main-box #box-shadows > *:nth-child(2) {
opacity: 0;
transition: all 0.7s ease;
}
&.active #main-box #box-shadows > *:nth-child(2) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(3) {
opacity: 0;
transform: translateX(83px) translateY(76px);
transition: all 0.5s ease;
transition-delay: 0.2s;
}
&.active #main-box #boxes > *:nth-child(3) {
opacity: 1;
transform: translateX(83px) translateY(96px);
}
& #main-box #box-shadows > *:nth-child(3) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.2s;
}
&.active #main-box #box-shadows > *:nth-child(3) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(4) {
opacity: 0;
transform: translateX(41px) translateY(4px);
transition: all 0.5s ease;
transition-delay: 0.3s;
}
&.active #main-box #boxes > *:nth-child(4) {
opacity: 1;
transform: translateX(41px) translateY(24px);
}
& #main-box #box-shadows > *:nth-child(4) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.3s;
}
&.active #main-box #box-shadows > *:nth-child(4) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(5) {
opacity: 0;
transform: translateX(83px) translateY(28px);
transition: all 0.5s ease;
transition-delay: 0.4s;
}
&.active #main-box #boxes > *:nth-child(5) {
opacity: 1;
transform: translateX(83px) translateY(48px);
transition-delay: 0.4s;
}
& #main-box #box-shadows > *:nth-child(5) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.4s;
}
&.active #main-box #box-shadows > *:nth-child(5) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(6) {
opacity: 0;
transform: translateX(124px) translateY(52px);
transition: all 0.5s ease;
transition-delay: 0.5s;
}
&.active #main-box #boxes > *:nth-child(6) {
opacity: 1;
transform: translateX(124px) translateY(72px);
}
& #main-box #box-shadows > *:nth-child(6) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.5s;
}
&.active #main-box #box-shadows > *:nth-child(6) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(7) {
opacity: 0;
transform: translateX(83px) translateY(-20px);
transition: all 0.5s ease;
transition-delay: 0.6s;
}
&.active #main-box #boxes > *:nth-child(7) {
opacity: 1;
transform: translateX(83px) translateY(0px);
}
& #main-box #box-shadows > *:nth-child(7) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.6s;
}
&.active #main-box #box-shadows > *:nth-child(7) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(8) {
opacity: 0;
transform: translateX(124px) translateY(4px);
transition: all 0.5s ease;
transition-delay: 0.7s;
}
&.active #main-box #boxes > *:nth-child(8) {
opacity: 1;
transform: translateX(124px) translateY(24px);
}
& #main-box #box-shadows > *:nth-child(8) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.7s;
}
&.active #main-box #box-shadows > *:nth-child(8) {
opacity: 1;
}
& #main-box #boxes > *:nth-child(9) {
opacity: 0;
transform: translateX(166px) translateY(28px);
transition: all 0.5s ease;
transition-delay: 0.8s;
}
&.active #main-box #boxes > *:nth-child(9) {
opacity: 1;
transform: translateX(166px) translateY(48px);
}
& #main-box #box-shadows > *:nth-child(9) {
opacity: 0;
transition: all 0.7s ease;
transition-delay: 0.8s;
}
&.active #main-box #box-shadows > *:nth-child(9) {
opacity: 1;
}
& #lines-inter-main {
opacity: 0;
}
&.active #lines-inter-main {
opacity: 1;
transition: all 0.7s ease;
transition-delay: 0.8s;
}
& #main-box #base {
opacity: 0;
transition: all 0.5s ease;
}
&.active #main-box #base {
opacity: 1;
}
}