summaryrefslogtreecommitdiffstats
path: root/chromium/chrome/browser/resources/welcome/shared/animations_css.html
diff options
context:
space:
mode:
Diffstat (limited to 'chromium/chrome/browser/resources/welcome/shared/animations_css.html')
-rw-r--r--chromium/chrome/browser/resources/welcome/shared/animations_css.html66
1 files changed, 31 insertions, 35 deletions
diff --git a/chromium/chrome/browser/resources/welcome/shared/animations_css.html b/chromium/chrome/browser/resources/welcome/shared/animations_css.html
index c79bd5443f6..268c0300275 100644
--- a/chromium/chrome/browser/resources/welcome/shared/animations_css.html
+++ b/chromium/chrome/browser/resources/welcome/shared/animations_css.html
@@ -1,39 +1,35 @@
-<link rel="import" href="chrome://resources/html/polymer.html">
+<template>
+ <style>
+ @keyframes fade-in {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
-<dom-module id="animations">
- <template>
- <style>
- @keyframes fade-in {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
+ @keyframes slide-in {
+ 0% { transform: translateX(var(--slide-in-length, 40px)); }
+ 100% { transform: translateX(0); }
+ }
- @keyframes slide-in {
- 0% { transform: translateX(var(--slide-in-length, 40px)); }
- 100% { transform: translateX(0); }
- }
+ .fade-in {
+ animation-delay: var(--animation-delay, 0);
+ animation-duration: 200ms;
+ animation-fill-mode: forwards;
+ animation-name: fade-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
- .fade-in {
- animation-delay: var(--animation-delay, 0);
- animation-duration: 200ms;
- animation-fill-mode: forwards;
- animation-name: fade-in;
- animation-timing-function: ease-in;
- opacity: 0;
- }
+ .slide-in {
+ animation-delay: var(--animation-delay, 0);
+ animation-duration: 200ms;
+ animation-fill-mode: forwards;
+ animation-name: slide-in;
+ animation-timing-function: ease;
+ transform: translateX(30px);
+ }
- .slide-in {
- animation-delay: var(--animation-delay, 0);
- animation-duration: 200ms;
- animation-fill-mode: forwards;
- animation-name: slide-in;
- animation-timing-function: ease;
- transform: translateX(30px);
- }
-
- :host-context(html[dir='rtl']) .slide-in {
- --slide-in-length: -40px;
- }
- </style>
- </template>
-</dom-module>
+ :host-context(html[dir='rtl']) .slide-in {
+ --slide-in-length: -40px;
+ }
+ </style>
+</template>