Add the decorative icons to the sync confirmation dialog.

chrome/browser/resources/sync_confirmation/sync_confirmation.css

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body {
   font-size: 100%;
   margin: 0;
   padding: 0;
 }
 
@@ skipping 10 matching lines @@
 
 .container {
   background-color: white;
   height: 351px;
   overflow: hidden;
   width: 448px;
 }
 
 .top-title-bar {
   -webkit-padding-start: 24px;
-  -webkit-padding-start: 24px;
   align-items: center;
   border-bottom: 1px solid lightgray;
   color: #333;
   display: flex;
   font-size: 1em;
   height: 56px;
 }
 
 .details {
   height: 250px;
   padding: 20px 24px;
 }
 
 .sync-message {
   color: #595959;
   font-size: 0.8125em;
   line-height: 150%;
   padding-bottom: 32px;
 }
 
-.picture-container {
+#picture-container {
   align-items: center;
   display: flex;
   justify-content: center;
   padding-bottom: 32px;
 }
 
 .picture {
+  -webkit-margin-start: 84px;
   height: 96px;
   position: relative;
   width: 96px;
 }
 
 #profile-picture,
-.checkmark-bubble {
+.checkmark-circle {
   position: absolute;
 }
 
-.checkmark-bubble {
-  background-color: white;
-  background-image: url(//resources/images/check_circle.svg);
-  background-size: 100%;
-  border: 1px solid white;
-  border-radius: 50%;
-  display: inline-block;
-  height: 30px;
-  left: 64px;
-  top: 66px;
-  width: 30px;
-}
-
 .action-container {
   align-items: baseline;
   display: flex;
   justify-content: flex-end;
 }
 
 paper-button {
   font-size:  0.8125em;
   padding-left: 12px;
   padding-right: 12px;
 }
 
 #confirmButton {
   background-color: rgb(66, 133, 244);
   color: white;
 }
 
 #undoButton {
   color: #5A5A5A;
 }
+
+#illustration {
+  height: 96px;
+  margin: 0 auto;
+  position: relative;
+  width: 264px;
+}
+
+#checkmark-circle {
+  background: rgb(66, 133, 244);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  bottom: 0;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  transform: scale(0);
+  width: 24px;
+}
+
+.loaded #checkmark-circle {
+  animation: scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards;

[Dan Beam, 2016/02/25 22:49:30]

where did you get 300ms?

[anthonyvd, 2016/02/26 17:29:19]

The designer spec for this animation.

+}
+
+@keyframes scale-circle {
+  from {transform: scale(0);}
+  to {transform: scale(1);}

[Dan Beam, 2016/02/25 22:49:30]

spaces between braces

[anthonyvd, 2016/02/26 17:29:20]

Done.

+}
+
+#checkmark-check {
+  left: 5px;
+  position: absolute;
+  top: 7px;
+}
+
+.loaded #checkmark-path {
+  animation: draw-path 300ms cubic-bezier(0, 0, 0.2, 1) 100ms forwards;
+}
+
+@keyframes draw-path {
+  from {stroke-dashoffset: 16;}
+  to {stroke-dashoffset: 0;}
+}
+
+#icons {
+  height: 96px;
+  position: absolute;
+  width: 264px;
+}
+
+#icons > div {
+  animation-delay: 200ms;
+  animation-duration: 1.4s;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7);
+  background-size: cover;
+  opacity: 0;
+  position: absolute;
+}
+
+#icon-bookmarks {
+  background: url(../../../../ui/webui/resources/images/icon_bookmarks.svg);
+  height: 36px;
+  left: 58px;
+  top: 0;
+  width: 36px;
+}
+
+#icon-extensions {
+  background: url(../../../../ui/webui/resources/images/icon_extensions.svg);
+  height: 24px;
+  left: 30px;
+  top: 30px;
+  width: 24px;
+}
+
+
+#icon-passwords {
+  background: url(../../../../ui/webui/resources/images/icon_passwords.svg);
+  height: 30px;
+  left: 38px;
+  top: 66px;
+  width: 40px;
+}
+
+#icon-history {
+  background: url(../../../../ui/webui/resources/images/icon_history.svg);
+  height: 36px;
+  left: 190px;
+  top: 6px;
+  width: 36px;
+}
+
+#icon-tabs {
+  background: url(../../../../ui/webui/resources/images/icon_tabs.svg);
+  height: 24px;
+  left: 222px;
+  top: 44px;
+  width: 24px;
+}
+
+#icon-themes {
+  background: url(../../../../ui/webui/resources/images/icon_themes.svg);
+  height: 30px;
+  left: 184px;
+  top: 62px;
+  width: 32px;
+}
+
+#icon-circle-open {
+  border: 2px solid #000;
+  border-radius: 50%;
+  height: 8px;
+  left: 6px;
+  top: 56px;
+  width: 8px;
+}
+
+.icon-circle {
+  background: #000;
+  border-radius: 50%;
+  height: 4px;
+  width: 4px;
+}
+
+#icon-circle-1 {
+  left: 64px;
+  top: 50px;
+}
+
+#icon-circle-2 {
+  left: 178px;
+  top: 18px;
+}
+
+#icon-circle-3 {
+  left: 194px;
+  top: 50px;
+}
+
+#icon-circle-4 {
+  left: 258px;
+  top: 36px;
+}
+
+.loaded .fade-top-left {
+  animation-name: fade-in-icon-top-left;
+}
+
+.loaded .fade-top-right {
+  animation-name: fade-in-icon-top-right;
+}
+
+.loaded .fade-middle-left {
+  animation-name: fade-in-icon-middle-left;
+}
+
+.loaded .fade-middle-right {
+  animation-name: fade-in-icon-middle-right;
+}
+
+.loaded .fade-bottom-left {
+  animation-name: fade-in-icon-bottom-left;
+}
+
+.loaded .fade-bottom-right {
+  animation-name: fade-in-icon-bottom-right;
+}
+
+@keyframes fade-in-icon-top-left {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(-4px, -4px);
+  }
+}
+
+@keyframes fade-in-icon-top-right {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(4px, -4px);
+  }
+}
+
+@keyframes fade-in-icon-middle-left {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(-4px, 0);
+  }
+}
+
+@keyframes fade-in-icon-middle-right {
+  from {
+    opacity: 0;
+     transform: translate(0, 0);
+    }
+  to {
+    opacity: 0.1;
+    transform: translate(4px, 0);
+  }
+}
+
+@keyframes fade-in-icon-bottom-left {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(-4px, 4px);
+  }
+}
+
+@keyframes fade-in-icon-bottom-right {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(4px, 4px);
+  }
+}