Add the decorative icons to the sync confirmation dialog.

chrome/browser/resources/sync_confirmation/sync_confirmation.css

Index: chrome/browser/resources/sync_confirmation/sync_confirmation.css
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.css b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
index c57ae25abf23667d4587ebe291e312e443872a20..3d67c15f8085d0e5042fb579507a2f772e1446e1 100644
--- a/chrome/browser/resources/sync_confirmation/sync_confirmation.css
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
@@ -28,7 +28,6 @@ a {
 
 .top-title-bar {
   -webkit-padding-start: 24px;
-  -webkit-padding-start: 24px;
   align-items: center;
   border-bottom: 1px solid lightgray;
   color: #333;
@@ -49,7 +48,7 @@ a {
   padding-bottom: 32px;
 }
 
-.picture-container {
+#picture-container {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -57,29 +56,17 @@ a {
 }
 
 .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;
@@ -100,3 +87,237 @@ paper-button {
 #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);
+  }
+}