blob: c79bd5443f6ccf6e9c67c49126b66b7ec0caae3b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<link rel="import" href="chrome://resources/html/polymer.html">
<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); }
}
.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);
}
:host-context(html[dir='rtl']) .slide-in {
--slide-in-length: -40px;
}
</style>
</template>
</dom-module>
|
