chrome/browser/resources/welcome/dice_welcome/welcome_app.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="welcome_browser_proxy.html">

<dom-module id="welcome-app">
  <template>
    <style>
      @keyframes slideUpContent {
        from {
          transform: translateY(120px);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
      }

      @keyframes fadeInAndSlideUp {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
      }

      @keyframes fadeOutAndSlideUp {
        to {
          height: 0;
          opacity: 0;
          transform: translateY(-8px);
        }
      }

      @keyframes spin {
        from {
          transform: rotate(1440deg) scale(0.8);
        }
      }

      @keyframes colorize {
        from {
          filter: grayscale(100%) brightness(128%) contrast(20%) brightness(161%);
          opacity: .6;
        }
      }

      @keyframes bounce {
        0% {
          transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        7.61% {
          transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        11.41% {
          transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        15.12% {
          transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        18.92% {
          transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        22.72% {
          transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        30.23% {
          transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        50.25% {
          transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        70.27% {
          transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
        100% {
          transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        }
      }

      .slider {
        align-items: center;
        animation: slideUpContent 600ms 2.5s cubic-bezier(.4, .2, 0, 1) both;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        max-width: 500px;
      }

      .heading-container {
        animation: fadeInAndSlideUp 1s 400ms cubic-bezier(.4, .2, 0, 1) both;
        color: var(--paper-grey-800);
        font-size: 2.5em;
        line-height: 1em;
        margin-bottom: 0.25em;
        margin-top: 1.5em;
        position: relative;
      }

      :host-context([dark]) .heading-container {
        color: var(--cr-primary-text-color);
      }

      .heading {
        animation: fadeOutAndSlideUp 600ms 2.1s cubic-bezier(.4, .2, 0, 1) forwards;
        /* Makes sure fading-in/out doesn't impact the logo position. */
        position: absolute;
      }

      .second-heading {
        animation: fadeInAndSlideUp 600ms 2.5s cubic-bezier(.4, .2, 0, 1) both;
        font-size: 0.6em;
      }

      #logoWrapper {
        animation: fadeIn 600ms both, bounce 1s 600ms linear both;
        height: 96px;
        position: relative;
        width: 96px;
      }

      #logo {
        animation: spin 2.4s cubic-bezier(.4, .2, 0, 1) both,
                   colorize 300ms 700ms linear both;
        background-image: -webkit-image-set(url(chrome://welcome/logo.png) 1x,
                                            url(chrome://welcome/logo2x.png) 2x);
        background-size: 100%;
        height: 96px;
        width: 96px;
      }

      .signin {
        animation: fadeInAndSlideUp 600ms 2.5s cubic-bezier(.4, .2, 0, 1) both;
      }

      .signin-description {
        font-size: 1em;
        line-height: 1.725em;
        max-width: 344px;
      }

      .signin-buttons {
        align-items: center;
        display: flex;
        font-size: .8125em;
        justify-content: space-between;
        margin-top: 2.5em;
      }

      cr-button {
        min-width: 92px;
      }
    </style>
    <div class="slider">
      <div id="logoWrapper">
        <div id="logo" on-click="onLogoTap_"></div>
      </div>
      <div class="heading-container">
        <div class="heading">$i18n{headerText}</div>
        <div class="second-heading">$i18n{secondHeaderText}</div>
      </div>
      <div class="signin">
        <div class="signin-description">$i18n{descriptionText}</div>
        <div class="signin-buttons">
          <cr-button on-click="onDecline_">
            $i18n{declineText}
          </cr-button>
          <cr-button class="action-button" on-click="onAccept_">
            $i18n{acceptText}
          </cr-button>
        </div>
      </div>
    </div>
  </template>
  <script src="welcome_app.js"></script>
</dom-module>