L. css / motion.css

1
/*
2
 Copyright 2016 Google Inc. All rights reserved.
3
4
 Licensed under the Apache License, Version 2.0 (the "License");
5
 you may not use this file except in compliance with the License.
6
 You may obtain a copy of the License at
7
8
     http://www.apache.org/licenses/LICENSE-2.0
9
10
 Unless required by applicable law or agreed to in writing, software
11
 distributed under the License is distributed on an "AS IS" BASIS,
12
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
 See the License for the specific language governing permissions and
14
 limitations under the License.
15
*/
16

  
17
:root {

  
18
  /* Emphasized decelerate easing (out) */

  
19
  --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;

  
20
  --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;

  
21
  --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;

  
22
  --md-sys-motion-easing-emphasized-decelerate-y1: 1;

  
23
  /* Emphasized accelerate easing (in) */

  
24
  --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;

  
25
  --md-sys-motion-easing-emphasized-accelerate-y0: 0;

  
26
  --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;

  
27
  --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;

  
28
  /* Standard decelerate easing (out) */

  
29
  --md-sys-motion-easing-standard-decelerate-x0: 0;

  
30
  --md-sys-motion-easing-standard-decelerate-y0: 0;

  
31
  --md-sys-motion-easing-standard-decelerate-x1: 0;

  
32
  --md-sys-motion-easing-standard-decelerate-y1: 1;

  
33
  /* Standard accelerate easing (in) */

  
34
  --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;

  
35
  --md-sys-motion-easing-standard-accelerate-y0: 0;

  
36
  --md-sys-motion-easing-standard-accelerate-x1: 1;

  
37
  --md-sys-motion-easing-standard-accelerate-y1: 1;

  
38
  /* Duration 1000ms */

  
39
  --md-sys-motion-duration-1000: 1000ms;

  
40
  /* Duration 900ms */

  
41
  --md-sys-motion-duration-900: 900ms;

  
42
  /* Duration 800ms */

  
43
  --md-sys-motion-duration-800: 800ms;

  
44
  /* Duration 700ms */

  
45
  --md-sys-motion-duration-700: 700ms;

  
46
  /* Duration 600ms */

  
47
  --md-sys-motion-duration-600: 600ms;

  
48
  /* Duration 550ms */

  
49
  --md-sys-motion-duration-550: 550ms;

  
50
  /* Duration 500ms */

  
51
  --md-sys-motion-duration-500: 500ms;

  
52
  /* Duration 450ms */

  
53
  --md-sys-motion-duration-450: 450ms;

  
54
  /* Duration 400ms */

  
55
  --md-sys-motion-duration-400: 400ms;

  
56
  /* Duration 350ms */

  
57
  --md-sys-motion-duration-350: 350ms;

  
58
  /* Duration 300ms */

  
59
  --md-sys-motion-duration-300: 300ms;

  
60
  /* Duration 250ms */

  
61
  --md-sys-motion-duration-250: 250ms;

  
62
  /* Duration 200ms */

  
63
  --md-sys-motion-duration-200: 200ms;

  
64
  /* Duration 150ms */

  
65
  --md-sys-motion-duration-150: 150ms;

  
66
  /* Duration 100ms */

  
67
  --md-sys-motion-duration-100: 100ms;

  
68
  /* Duration 50ms */

  
69
  --md-sys-motion-duration-50: 50ms;

  
70
  /* Standard easing (in and out) */

  
71
  --md-sys-motion-easing-standard-x0: 0.20000000298023224;

  
72
  --md-sys-motion-easing-standard-y0: 0;

  
73
  --md-sys-motion-easing-standard-x1: 0;

  
74
  --md-sys-motion-easing-standard-y1: 1;

  
75
  /* Linear easing */

  
76
  --md-sys-motion-easing-linear-x0: 0;

  
77
  --md-sys-motion-easing-linear-y0: 0;

  
78
  --md-sys-motion-easing-linear-x1: 1;

  
79
  --md-sys-motion-easing-linear-y1: 1;

  
80
  /* Emphasized */

  
81
  --md-sys-motion-easing-emphasized-x0: 0.20000000298023224;

  
82
  --md-sys-motion-easing-emphasized-y0: 0;

  
83
  --md-sys-motion-easing-emphasized-x1: 0;

  
84
  --md-sys-motion-easing-emphasized-y1: 1;

  
85
  /* Motion path */

  
86
  --md-sys-motion-path-standard-path: 1;

  
87
}

  
88
.duration-50 {

  
89
  transition-duration: var(--md-sys-motion-duration-50);

  
90
}

  
91
.duration-100 {

  
92
  transition-duration: var(--md-sys-motion-duration-100);

  
93
}

  
94
.duration-150 {

  
95
  transition-duration: var(--md-sys-motion-duration-150);

  
96
}

  
97
.duration-200 {

  
98
  transition-duration: var(--md-sys-motion-duration-200);

  
99
}

  
100
.duration-250 {

  
101
  transition-duration: var(--md-sys-motion-duration-250);

  
102
}

  
103
.duration-300 {

  
104
  transition-duration: var(--md-sys-motion-duration-300);

  
105
}

  
106
.duration-350 {

  
107
  transition-duration: var(--md-sys-motion-duration-350);

  
108
}

  
109
.duration-400 {

  
110
  transition-duration: var(--md-sys-motion-duration-400);

  
111
}

  
112
.duration-450 {

  
113
  transition-duration: var(--md-sys-motion-duration-450);

  
114
}

  
115
.duration-500 {

  
116
  transition-duration: var(--md-sys-motion-duration-500);

  
117
}

  
118
.duration-550 {

  
119
  transition-duration: var(--md-sys-motion-duration-550);

  
120
}

  
121
.duration-600 {

  
122
  transition-duration: var(--md-sys-motion-duration-600);

  
123
}

  
124
.duration-700 {

  
125
  transition-duration: var(--md-sys-motion-duration-700);

  
126
}

  
127
.duration-800 {

  
128
  transition-duration: var(--md-sys-motion-duration-800);

  
129
}

  
130
.duration-900 {

  
131
  transition-duration: var(--md-sys-motion-duration-900);

  
132
}

  
133
.duration-1000 {

  
134
  transition-duration: var(--md-sys-motion-duration-1000);

  
135
}

  
136
.easing-standard {

  
137
  transition-timing-function: cubic-bezier(

  
138
    var(--md-sys-motion-easing-standard-x0),

  
139
    var(--md-sys-motion-easing-standard-y0),

  
140
    var(--md-sys-motion-easing-standard-x1),

  
141
    var(--md-sys-motion-easing-standard-y1)

  
142
  );

  
143
}

  
144
.easing-linear {

  
145
  transition-timing-function: cubic-bezier(

  
146
    var(--md-sys-motion-easing-linear-x0),

  
147
    var(--md-sys-motion-easing-linear-y0),

  
148
    var(--md-sys-motion-easing-linear-x1),

  
149
    var(--md-sys-motion-easing-linear-y1)

  
150
  );

  
151
}

  
152
.easing-standard-accelerate {

  
153
  transition-timing-function: cubic-bezier(

  
154
    var(--md-sys-motion-easing-standard-accelerate-x0),

  
155
    var(--md-sys-motion-easing-standard-accelerate-y0),

  
156
    var(--md-sys-motion-easing-standard-accelerate-x1),

  
157
    var(--md-sys-motion-easing-standard-accelerate-y1)

  
158
  );

  
159
}

  
160
.easing-standard-decelerate {

  
161
  transition-timing-function: cubic-bezier(

  
162
    var(--md-sys-motion-easing-standard-decelerate-x0),

  
163
    var(--md-sys-motion-easing-standard-decelerate-y0),

  
164
    var(--md-sys-motion-easing-standard-decelerate-x1),

  
165
    var(--md-sys-motion-easing-standard-decelerate-y1)

  
166
  );

  
167
}

  
168
.easing-emphasized {

  
169
  transition-timing-function: cubic-bezier(

  
170
    var(--md-sys-motion-easing-emphasized-x0),

  
171
    var(--md-sys-motion-easing-emphasized-y0),

  
172
    var(--md-sys-motion-easing-emphasized-x1),

  
173
    var(--md-sys-motion-easing-emphasized-y1)

  
174
  );

  
175
}

  
176

 


 
 
 
     skip_previous
    
 
     skip_next