← All changes | css/admin/animations.css +12 -128 6.32 → 6.18 View file →

		@@ -1,8 +1,7 @@
1	1	/* fadeIn */
2	2	.frm-fadein {
3		- --frm-fadein-time: 400ms;
4		- animation: fadeIn var(--frm-fadein-time, 400ms) ease-in-out forwards;
	3	+ animation: fadeIn 400ms ease-in-out forwards;
5	4	}
6	5
7	6	.frm-fadein-up {
8	7	animation: fadeInUp 230ms ease-in-out forwards;
		@@ -8,95 +7,49 @@
8	7	animation: fadeInUp 230ms ease-in-out forwards;
9	8	}
10	9
11	10	.frm-fadein-up-back {
12		- animation: fadeInUpBack 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	11	+ animation: fadeInUpBack 500ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
13	12	}
14	13
15	14	.frm-fadein-down-short {
16		- --frm-fadein-down-short-time: 300ms;
17		- animation: fadeInDownShort var(--frm-fadein-down-short-time, 300ms) ease-out forwards;
	15	+ animation: fadeInDownShort 300ms ease-out forwards;
18	16	}
19		-
20		-.frm-fadeout {
21		- animation: fadeOut var(--fadeout-time, 400ms) ease-in-out forwards;
22		-}
23		-
24	17	/* END fadeIn */
25	18
26		-/* pulse */
27		-.frm-pulse {
28		- position: relative;
29		-}
30		-
31		-.frm-pulse::after {
32		- content: "";
33		- position: absolute;
34		- top: 0;
35		- left: 0;
36		- width: 100%;
37		- height: 100%;
38		- border-radius: inherit;
39		- background-color: inherit;
40		- z-index: -1;
41		- animation: pulse 2s ease-out 650ms infinite;
42		- will-change: transform, opacity;
43		-}
44		-
45		-/* END pulse */
46		-
47		-/* slide down */
48		-.frm-slide-down,
49		-.frm-collapse-me {
50		- animation: slideDown var(--slide-time, 2000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
51		-}
52		-
53		-/* END slide down */
54		-
55	19	/* cascadeFadeIn */
56	20	.frm-init-cascade-animation {
57		- transform: translateY(0);
58		- opacity: 1 !important;
	21	+ transform: translateY( 0px );
	22	+ opacity: 1.0 !important;
59	23	transition: 0.35s transform, 0.35s opacity linear;
60	24	will-change: transform;
61	25	}
62		-
63	26	.frm-init-cascade-animation > * {
64	27	transition: 0.3s opacity linear;
65	28	transition-delay: 0.1s;
66	29	}
67		-
68	30	.frm-init-cascade-animation.frm-animate {
69		- transform: translateY(7px);
70		- opacity: 0 !important;
	31	+ transform: translateY( 7px );
	32	+ opacity: 0.0 !important;
71	33	}
72		-
73	34	.frm-init-cascade-animation.frm-animate > * {
74		- opacity: 0;
	35	+ opacity: 0.0;
75	36	}
76		-
77	37	/* End cascadeFadeIn */
78	38
79	39	/* FadeIn 3d */
80	40	.frm-init-fadein-3d.frm-animate {
81		- opacity: 0 !important;
82		- transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.00095, 0, 0, 1, 0, 0, 0, 0, 1) translateY(15px) scale3d(0.92, 0.92, 1);
	41	+ opacity:0.0!important;
	42	+ transform: matrix3d( 1,0,0,0,0,1,0,-0.00095,0,0,1,0,0,0,0,1 ) translateY( 15px ) scale3d( 0.92, 0.92, 1 );
83	43	}
84		-
85	44	.frm-init-fadein-3d {
86		- opacity: 1 !important;
87		- transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) translateY(0) scale3d(1, 1, 1);
	45	+ opacity:1!important;
	46	+ transform: matrix3d( 1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1 ) translateY( 0px ) scale3d( 1, 1, 1 );
88	47	transition: 0.35s transform, 0.5s opacity linear;
89	48	}
90		-
91	49	/* END FadeIn 3d */
92	50
93		-.frm-background-highlight {
94		- animation: backgroundHighlight var(--highlight-time, 2750ms) ease-in forwards;
95		-}
96		-
97	51	@keyframes fadeIn {
98		-
99	52	0% {
100	53	opacity: 0;
101	54	}
102	55
		@@ -104,21 +57,9 @@
104	57	opacity: 1;
105	58	}
106	59	}
107	60
108		-@keyframes fadeOut {
109		-
110		- 0% {
111		- opacity: 1;
112		- }
113		-
114		- 100% {
115		- opacity: 0;
116		- }
117		-}
118		-
119	61	@keyframes fadeInUp {
120		-
121	62	0% {
122	63	opacity: 0;
123	64	transform: translateY(10px);
124	65	}
		@@ -129,9 +70,8 @@
129	70	}
130	71	}
131	72
132	73	@keyframes fadeInUpBack {
133		-
134	74	0% {
135	75	opacity: 0;
136	76	transform: translateY(32px);
137	77	}
		@@ -142,9 +82,8 @@
142	82	}
143	83	}
144	84
145	85	@keyframes fadeInDownShort {
146		-
147	86	0% {
148	87	opacity: 0.4;
149	88	transform: translateY(-2px);
150	89	}
		@@ -151,61 +90,6 @@
151	90
152	91	100% {
153	92	opacity: 1;
154	93	transform: translateY(0);
155		- }
156		-}
157		-
158		-@keyframes slideDown {
159		-
160		- 0% {
161		- max-height: 0;
162		- opacity: 0;
163		- overflow: hidden;
164		- }
165		-
166		- 25% {
167		- opacity: 1;
168		- }
169		-
170		- 99% {
171		- max-height: var(--slide-height, 10000px);
172		- overflow: visible;
173		- }
174		-
175		- 100% {
176		- max-height: none;
177		- }
178		-}
179		-
180		-@keyframes backgroundHighlight {
181		-
182		- 0% {
183		- background-color: var(--primary-25);
184		- }
185		-
186		- 90% {
187		- background-color: var(--primary-25);
188		- }
189		-
190		- 100% {
191		- background-color: #fff;
192		- }
193		-}
194		-
195		-@keyframes pulse {
196		-
197		- 0% {
198		- transform: scale(1);
199		- opacity: 0.8;
200		- }
201		-
202		- 70% {
203		- transform: scale(2.2);
204		- opacity: 0;
205		- }
206		-
207		- 100% {
208		- transform: scale(2.2);
209		- opacity: 0;
210	94	}
211	95	}