739 lines
15 KiB
SCSS
739 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;
|
|
}
|
|
}
|
|
|
|
#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-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: 0.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;
|
|
}
|
|
}
|