github.com/outbrain/consul@v1.4.5/website/source/assets/stylesheets/consul-connect/_animations.scss (about)

     1  .g-animation-block {
     2    width: 70%;
     3    margin: 0 auto;
     4    opacity: 0.4;
     5    transition: all 0.5s ease;
     6  
     7    &.active {
     8      opacity: 1;
     9    }
    10  }
    11  
    12  #configuration-challenge-animation {
    13    & #c-line-8,
    14    & #c-line-7,
    15    & #c-line-6,
    16    & #c-line-5,
    17    & #c-line-4,
    18    & #c-line-3,
    19    & #c-line-2,
    20    & #c-line-1 {
    21      stroke-dasharray: 64;
    22      stroke-dashoffset: 64;
    23    }
    24  
    25    & #c-box-1,
    26    & #c-box-2,
    27    & #c-box-3,
    28    & #c-box-4,
    29    & #c-box-5,
    30    & #c-box-6,
    31    & #c-box-7,
    32    & #c-box-8 {
    33      opacity: 0.5;
    34    }
    35  }
    36  
    37  #configuration-solution-animation {
    38    & #s-line-1,
    39    & #s-line-2,
    40    & #s-line-3,
    41    & #s-line-4,
    42    & #s-line-5,
    43    & #s-line-6,
    44    & #s-line-7,
    45    & #s-line-8 {
    46      stroke-dasharray: 58;
    47      stroke-dashoffset: 58;
    48    }
    49    & #s-service-box-1,
    50    & #s-service-box-2,
    51    & #s-service-box-3,
    52    & #s-service-box-4,
    53    & #s-service-box-5,
    54    & #s-service-box-6,
    55    & #s-service-box-7,
    56    & #s-service-box-8 {
    57      opacity: 0.5;
    58    }
    59    & #s-dots {
    60      opacity: 0;
    61    }
    62  }
    63  
    64  #discovery-challenge-animation {
    65    & #c-box-left-placement {
    66      opacity: 0;
    67    }
    68  
    69    & #c-broken-link-left {
    70      opacity: 0;
    71    }
    72  
    73    & #c-broken-link-right {
    74      opacity: 0;
    75    }
    76  
    77    & #c-computer {
    78      opacity: 0.12;
    79    }
    80  
    81    & #c-computer-to-load-balancers #c-arrow-down {
    82      opacity: 0;
    83    }
    84  
    85    & #c-computer-to-load-balancers #c-arrow-right {
    86      opacity: 0;
    87    }
    88  
    89    & #c-computer-to-load-balancers #c-arrow-left {
    90      opacity: 0;
    91    }
    92  
    93    & #c-computer-to-load-balancers #c-circle {
    94      opacity: 0;
    95    }
    96  
    97    & #c-computer-to-load-balancers #c-edit-box {
    98      opacity: 0;
    99    }
   100  
   101    & #c-load-balancer-left > #c-progress-bar,
   102    & #c-load-balancer-right > #c-progress-bar-2,
   103    & #c-load-balancer-middle > #c-progress-bar-3 {
   104      opacity: 0;
   105    }
   106  
   107    & #c-load-balancer-left > #c-progress-bar > *:last-child,
   108    & #c-load-balancer-right > #c-progress-bar-2 > *:last-child,
   109    & #c-load-balancer-middle > #c-progress-bar-3 > *:last-child {
   110      width: 0;
   111    }
   112  
   113    & #c-line-horizontal-right {
   114      stroke-dasharray: 65;
   115      stroke-dashoffset: 65;
   116    }
   117  
   118    & #c-line-horizontal-right > line {
   119      stroke: #000;
   120    }
   121  
   122    & #c-line-top-right {
   123      stroke-dasharray: 17;
   124      stroke-dashoffset: 17;
   125    }
   126  
   127    & #c-line-bottom-right {
   128      stroke-dasharray: 80;
   129      stroke-dashoffset: 80;
   130    }
   131  
   132    & #c-line-top-left {
   133      stroke-dasharray: 17;
   134      stroke-dashoffset: 0;
   135    }
   136  
   137    & #line-bottom-left {
   138      stroke-dasharray: 56;
   139      stroke-dashoffset: 0;
   140    }
   141  
   142    & #c-line-top-left > * {
   143      stroke: #3969ed;
   144    }
   145    & #c-line-bottom-left > * {
   146      stroke: #3969ed;
   147    }
   148    & #c-line-bottom-right > * {
   149      stroke: #000;
   150    }
   151    & #c-box-far-left > path {
   152      fill: #3969ed;
   153    }
   154  }
   155  
   156  #discovery-solution-animation {
   157    & #s-active-service-3 {
   158      display: none;
   159    }
   160    & #s-connected-line-2 {
   161      stroke-dasharray: 270;
   162      stroke-dashoffset: 270;
   163    }
   164    & #s-connected-line-1 {
   165      stroke-dasharray: 222;
   166    }
   167    & #s-dotted-line-left {
   168      opacity: 0;
   169    }
   170    & #s-dotted-lines-right {
   171      opacity: 0;
   172    }
   173    & #s-dotted-lines-right > path:last-child {
   174      opacity: 0;
   175    }
   176    & #s-dynamic-sync-right {
   177      opacity: 0;
   178    }
   179    & #s-dynamic-sync-left {
   180      opacity: 0;
   181    }
   182    & #s-dynamic-sync-left > path {
   183      transform-origin: 88px 127px;
   184    }
   185    & #s-dotted-service-box-2 {
   186      opacity: 0;
   187    }
   188  }
   189  
   190  #segmentation-challenge-animation {
   191    & #c-firewall-updates #c-update_path {
   192      opacity: 0;
   193    }
   194    & #c-firewall-updates #c-edit {
   195      opacity: 0;
   196    }
   197    & #c-computer {
   198      opacity: 0;
   199    }
   200    & #c-progress-indicator,
   201    & #c-progress-indicator-2,
   202    & #c-progress-indicator-3 {
   203      opacity: 0;
   204    }
   205    & #c-broken-link-1,
   206    & #c-broken-link-2,
   207    & #c-broken-link-3 {
   208      opacity: 0;
   209    }
   210    & #c-box-2,
   211    & #c-box-4,
   212    & #c-box-6 {
   213      opacity: 0;
   214    }
   215  
   216    & #c-path-1 > *:nth-child(1) {
   217      stroke-dasharray: 50;
   218      stroke-dashoffset: 50;
   219    }
   220    & #c-path-1 > *:nth-child(2) {
   221      stroke-dasharray: 94;
   222      stroke-dashoffset: 94;
   223    }
   224    & #c-path-1 > *:nth-child(3) {
   225      stroke-dasharray: 102;
   226      stroke-dashoffset: 102;
   227    }
   228    & #c-path-2 > *:nth-child(1) {
   229      stroke-dasharray: 50;
   230      stroke-dashoffset: 50;
   231    }
   232    & #c-path-2 > *:nth-child(2) {
   233      stroke-dasharray: 32;
   234      stroke-dashoffset: 32;
   235    }
   236    & #c-path-2 > *:nth-child(3) {
   237      stroke-dasharray: 32;
   238      stroke-dashoffset: 32;
   239    }
   240    & #c-path-2 > *:nth-child(3) {
   241      stroke-dasharray: 148;
   242      stroke-dashoffset: 148;
   243    }
   244    & #c-path-3 > *:nth-child(1) {
   245      stroke-dasharray: 32;
   246      stroke-dashoffset: 32;
   247    }
   248    & #c-path-3 > *:nth-child(2) {
   249      stroke-dasharray: 54;
   250      stroke-dashoffset: 54;
   251    }
   252    & #c-path-3 > *:nth-child(3) {
   253      stroke-dasharray: 126;
   254      stroke-dashoffset: 126;
   255    }
   256  }
   257  
   258  #segmentation-solution-animation {
   259    #s-service-2 {
   260      opacity: 0;
   261    }
   262    #s-service-4 {
   263      opacity: 0;
   264    }
   265    #s-service-6 {
   266      opacity: 0;
   267    }
   268    #s-service-2 > path {
   269      fill: #000;
   270    }
   271    #s-service-4 > path {
   272      fill: #000;
   273    }
   274    #s-service-6 > path {
   275      fill: #000;
   276    }
   277    #s-secure-indicator-2 {
   278      opacity: 0;
   279    }
   280    #s-secure-indicator-4 {
   281      opacity: 0;
   282    }
   283    #s-secure-indicator-6 {
   284      opacity: 0;
   285    }
   286    #s-connection-path-6 {
   287      stroke-dasharray: 161;
   288      stroke-dashoffset: 161;
   289    }
   290    #s-connection-path-5 {
   291      stroke-dasharray: 73;
   292      stroke-dashoffset: 73;
   293    }
   294    #s-connection-path-4 {
   295      stroke-dasharray: 115;
   296      stroke-dashoffset: 115;
   297    }
   298    #s-connection-path-1 {
   299      stroke-dasharray: 16;
   300      stroke-dashoffset: 16;
   301    }
   302    #s-connection-path-2 {
   303      stroke-dasharray: 16;
   304      stroke-dashoffset: 16;
   305    }
   306    #s-connection-path-8 {
   307      stroke-dasharray: 73;
   308      stroke-dashoffset: 73;
   309    }
   310    #s-connection-path-10 {
   311      stroke-dasharray: 64;
   312      stroke-dashoffset: 64;
   313    }
   314    #s-connection-path-9 {
   315      stroke-dasharray: 16;
   316      stroke-dashoffset: 16;
   317    }
   318    #s-consul-inbound-paths-lower,
   319    #s-dynamic-update-inbound-lower {
   320      opacity: 0;
   321    }
   322    #s-consul-inbound-paths-upper,
   323    #s-dynamic-update-inbound-upper {
   324      opacity: 0;
   325    }
   326    #s-consul-server-connection-lower,
   327    #s-consul-outbound-5,
   328    #s-consul-outbound-6,
   329    #s-consul-outbound-7 {
   330      opacity: 0;
   331    }
   332    #s-tls-cert-lower,
   333    #s-dynamic-update-outbound-ower {
   334      opacity: 0;
   335    }
   336  
   337    #s-consul-server-connection-upper,
   338    #s-consul-outbound-1,
   339    #s-soncul-outbound-2,
   340    #s-consul-outbound-3,
   341    #s-consul-outbound-4 {
   342      opacity: 0;
   343    }
   344    #s-tls-cert-upper,
   345    #s-dynamic-update-outbound-upper {
   346      opacity: 0;
   347    }
   348  }
   349  
   350  #index-dynamic-animation {
   351    /* service boxes */
   352    & #aws-box {
   353      opacity: 0;
   354      transform: translateX(57px) translateY(164px);
   355      transition: all 0.5s ease;
   356      transition-delay: 2s;
   357    }
   358  
   359    &.active #aws-box {
   360      opacity: 1;
   361      transform: translateX(97px) translateY(144px);
   362    }
   363  
   364    & #gcp-box {
   365      opacity: 0;
   366      transform: translateX(-28px) translateY(106px);
   367      transition: all 0.5s ease;
   368      transition-delay: 1.5s;
   369    }
   370  
   371    &.active #gcp-box {
   372      opacity: 1;
   373      transform: translateX(0) translateY(92px);
   374    }
   375  
   376    & #azure-box {
   377      opacity: 0;
   378      transform: translateX(293px) translateY(116px);
   379      transition: all 0.5s ease;
   380      transition-delay: 2.5s;
   381    }
   382  
   383    &.active #azure-box {
   384      opacity: 1;
   385      transform: translateX(263px) translateY(96px);
   386    }
   387  
   388    /* connection lines */
   389  
   390    & #lines-origin-gcp > *:nth-child(1),
   391    & #dynamic #lines-origin-gcp > *:nth-child(1).off {
   392      stroke-dasharray: 64;
   393      stroke-dashoffset: -64;
   394    }
   395  
   396    &.active #lines-origin-gcp > *:nth-child(1) {
   397      stroke-dashoffset: 0;
   398      transition: all 0.7s ease;
   399      transition-delay: 1.9s;
   400    }
   401  
   402    & #lines-origin-gcp > *:nth-child(2),
   403    & #dynamic #lines-origin-gcp > *:nth-child(2).off {
   404      stroke-dasharray: 106;
   405      stroke-dashoffset: 106;
   406    }
   407  
   408    &.active #lines-origin-gcp > *:nth-child(2) {
   409      stroke-dashoffset: 0;
   410      transition: all 0.7s ease;
   411      transition-delay: 2s;
   412    }
   413  
   414    & #lines-origin-aws > *:nth-child(1),
   415    & #dynamic #lines-origin-aws > *:nth-child(1).off {
   416      stroke-dasharray: 64;
   417      stroke-dashoffset: 64;
   418    }
   419  
   420    &.active #lines-origin-aws > *:nth-child(1) {
   421      stroke-dashoffset: 0;
   422      transition: all 0.7s ease;
   423      transition-delay: 2.5s;
   424    }
   425  
   426    & #lines-origin-aws > *:nth-child(2),
   427    & #dynamic #lines-origin-aws > *:nth-child(2).off {
   428      stroke-dasharray: 202;
   429      stroke-dashoffset: 202;
   430    }
   431  
   432    &.active #lines-origin-aws > *:nth-child(2) {
   433      stroke-dashoffset: 0;
   434      transition: all 0.7s ease;
   435      transition-delay: 2.6s;
   436    }
   437  
   438    & #lines-origin-aws > *:nth-child(3),
   439    & #dynamic #lines-origin-aws > *:nth-child(3).off {
   440      stroke-dasharray: 111;
   441      stroke-dashoffset: 111;
   442    }
   443  
   444    &.active #lines-origin-aws > *:nth-child(3) {
   445      stroke-dashoffset: 0;
   446      transition: all 0.7s ease;
   447      transition-delay: 2.7s;
   448    }
   449  
   450    & #lines-origin-aws > *:nth-child(4),
   451    & #dynamic #lines-origin-aws > *:nth-child(4).off {
   452      stroke-dasharray: 64;
   453      stroke-dashoffset: 64;
   454    }
   455  
   456    &.active #lines-origin-aws > *:nth-child(4) {
   457      stroke-dashoffset: 0;
   458      transition: all 0.7s ease;
   459      transition-delay: 2.8s;
   460    }
   461  
   462    & #lines-origin-aws > *:nth-child(5),
   463    & #dynamic #lines-origin-aws > *:nth-child(5).off {
   464      stroke-dasharray: 158;
   465      stroke-dashoffset: 158;
   466    }
   467  
   468    &.active #lines-origin-aws > *:nth-child(5) {
   469      stroke-dashoffset: 0;
   470      transition: all 0.7s ease;
   471      transition-delay: 2.9s;
   472    }
   473  
   474    & #lines-origin-azure > *:nth-child(1),
   475    & #dynamic #lines-origin-azure > *:nth-child(1).off {
   476      stroke-dasharray: 64;
   477      stroke-dashoffset: 64;
   478    }
   479  
   480    &.active #lines-origin-azure > *:nth-child(1) {
   481      stroke-dashoffset: 0;
   482      transition: all 0.7s ease;
   483      transition-delay: 3.2s;
   484    }
   485  
   486    & #lines-origin-azure > *:nth-child(2),
   487    & #dynamic #lines-origin-azure > *:nth-child(2).off {
   488      stroke-dasharray: 64;
   489      stroke-dashoffset: 64;
   490    }
   491  
   492    &.active #lines-origin-azure > *:nth-child(2) {
   493      stroke-dashoffset: 0;
   494      transition: all 0.7s ease;
   495      transition-delay: 3.3s;
   496    }
   497  
   498    #lines-origin-azure > *:nth-child(3),
   499    & #dynamic #lines-origin-azure > *:nth-child(3).off {
   500      stroke-dasharray: 108;
   501      stroke-dashoffset: 108;
   502    }
   503  
   504    &.active #lines-origin-azure > *:nth-child(3) {
   505      stroke-dashoffset: 0;
   506      transition: all 0.7s ease;
   507      transition-delay: 3.4s;
   508    }
   509  
   510    & #lines-origin-azure > *:nth-child(4),
   511    & #dynamic #lines-origin-azure > *:nth-child(4).off {
   512      stroke-dasharray: 108;
   513      stroke-dashoffset: 108;
   514    }
   515  
   516    &.active #lines-origin-azure > *:nth-child(4) {
   517      stroke-dashoffset: 0;
   518      transition: all 0.7s ease;
   519      transition-delay: 3.5s;
   520    }
   521  
   522    /* main block boxes */
   523    & #main-box #boxes > *:nth-child(1) {
   524      opacity: 0;
   525      transform: translateX(0px) translateY(28px);
   526      transition: all 0.5s ease;
   527    }
   528  
   529    &.active #main-box #boxes > *:nth-child(1) {
   530      opacity: 1;
   531      transform: translateX(0px) translateY(48px);
   532    }
   533  
   534    & #main-box #box-shadows > *:nth-child(1) {
   535      opacity: 0;
   536      transition: all 0.7s ease;
   537    }
   538  
   539    &.active #main-box #box-shadows > *:nth-child(1) {
   540      opacity: 1;
   541    }
   542  
   543    & #main-box #boxes > *:nth-child(2) {
   544      opacity: 0;
   545      transform: translateX(41px) translateY(52px);
   546      transition: all 0.5s ease;
   547      transition-delay: 0.1s;
   548    }
   549  
   550    &.active #main-box #boxes > *:nth-child(2) {
   551      opacity: 1;
   552      transform: translateX(41px) translateY(72px);
   553      transition-delay: 0.1s;
   554    }
   555  
   556    & #main-box #box-shadows > *:nth-child(2) {
   557      opacity: 0;
   558      transition: all 0.7s ease;
   559    }
   560  
   561    &.active #main-box #box-shadows > *:nth-child(2) {
   562      opacity: 1;
   563    }
   564  
   565    & #main-box #boxes > *:nth-child(3) {
   566      opacity: 0;
   567      transform: translateX(83px) translateY(76px);
   568      transition: all 0.5s ease;
   569      transition-delay: 0.2s;
   570    }
   571  
   572    &.active #main-box #boxes > *:nth-child(3) {
   573      opacity: 1;
   574      transform: translateX(83px) translateY(96px);
   575    }
   576  
   577    & #main-box #box-shadows > *:nth-child(3) {
   578      opacity: 0;
   579      transition: all 0.7s ease;
   580      transition-delay: 0.2s;
   581    }
   582  
   583    &.active #main-box #box-shadows > *:nth-child(3) {
   584      opacity: 1;
   585    }
   586  
   587    & #main-box #boxes > *:nth-child(4) {
   588      opacity: 0;
   589      transform: translateX(41px) translateY(4px);
   590      transition: all 0.5s ease;
   591      transition-delay: 0.3s;
   592    }
   593  
   594    &.active #main-box #boxes > *:nth-child(4) {
   595      opacity: 1;
   596      transform: translateX(41px) translateY(24px);
   597    }
   598  
   599    & #main-box #box-shadows > *:nth-child(4) {
   600      opacity: 0;
   601      transition: all 0.7s ease;
   602      transition-delay: 0.3s;
   603    }
   604  
   605    &.active #main-box #box-shadows > *:nth-child(4) {
   606      opacity: 1;
   607    }
   608  
   609    & #main-box #boxes > *:nth-child(5) {
   610      opacity: 0;
   611      transform: translateX(83px) translateY(28px);
   612      transition: all 0.5s ease;
   613      transition-delay: 0.4s;
   614    }
   615  
   616    &.active #main-box #boxes > *:nth-child(5) {
   617      opacity: 1;
   618      transform: translateX(83px) translateY(48px);
   619      transition-delay: 0.4s;
   620    }
   621  
   622    & #main-box #box-shadows > *:nth-child(5) {
   623      opacity: 0;
   624      transition: all 0.7s ease;
   625      transition-delay: 0.4s;
   626    }
   627  
   628    &.active #main-box #box-shadows > *:nth-child(5) {
   629      opacity: 1;
   630    }
   631  
   632    & #main-box #boxes > *:nth-child(6) {
   633      opacity: 0;
   634      transform: translateX(124px) translateY(52px);
   635      transition: all 0.5s ease;
   636      transition-delay: 0.5s;
   637    }
   638  
   639    &.active #main-box #boxes > *:nth-child(6) {
   640      opacity: 1;
   641      transform: translateX(124px) translateY(72px);
   642    }
   643  
   644    & #main-box #box-shadows > *:nth-child(6) {
   645      opacity: 0;
   646      transition: all 0.7s ease;
   647      transition-delay: 0.5s;
   648    }
   649  
   650    &.active #main-box #box-shadows > *:nth-child(6) {
   651      opacity: 1;
   652    }
   653  
   654    & #main-box #boxes > *:nth-child(7) {
   655      opacity: 0;
   656      transform: translateX(83px) translateY(-20px);
   657      transition: all 0.5s ease;
   658      transition-delay: 0.6s;
   659    }
   660  
   661    &.active #main-box #boxes > *:nth-child(7) {
   662      opacity: 1;
   663      transform: translateX(83px) translateY(0px);
   664    }
   665  
   666    & #main-box #box-shadows > *:nth-child(7) {
   667      opacity: 0;
   668      transition: all 0.7s ease;
   669      transition-delay: 0.6s;
   670    }
   671  
   672    &.active #main-box #box-shadows > *:nth-child(7) {
   673      opacity: 1;
   674    }
   675  
   676    & #main-box #boxes > *:nth-child(8) {
   677      opacity: 0;
   678      transform: translateX(124px) translateY(4px);
   679      transition: all 0.5s ease;
   680      transition-delay: 0.7s;
   681    }
   682  
   683    &.active #main-box #boxes > *:nth-child(8) {
   684      opacity: 1;
   685      transform: translateX(124px) translateY(24px);
   686    }
   687  
   688    & #main-box #box-shadows > *:nth-child(8) {
   689      opacity: 0;
   690      transition: all 0.7s ease;
   691      transition-delay: 0.7s;
   692    }
   693  
   694    &.active #main-box #box-shadows > *:nth-child(8) {
   695      opacity: 1;
   696    }
   697  
   698    & #main-box #boxes > *:nth-child(9) {
   699      opacity: 0;
   700      transform: translateX(166px) translateY(28px);
   701      transition: all 0.5s ease;
   702      transition-delay: 0.8s;
   703    }
   704  
   705    &.active #main-box #boxes > *:nth-child(9) {
   706      opacity: 1;
   707      transform: translateX(166px) translateY(48px);
   708    }
   709  
   710    & #main-box #box-shadows > *:nth-child(9) {
   711      opacity: 0;
   712      transition: all 0.7s ease;
   713      transition-delay: 0.8s;
   714    }
   715  
   716    &.active #main-box #box-shadows > *:nth-child(9) {
   717      opacity: 1;
   718    }
   719  
   720    & #lines-inter-main {
   721      opacity: 0;
   722    }
   723  
   724    &.active #lines-inter-main {
   725      opacity: 1;
   726      transition: all 0.7s ease;
   727      transition-delay: 0.8s;
   728    }
   729  
   730    & #main-box #base {
   731      opacity: 0;
   732      transition: all 0.5s ease;
   733    }
   734  
   735    &.active #main-box #base {
   736      opacity: 1;
   737    }
   738  }