← All changes | css/admin/animations.css +15 -129 6.35 → 6.8 View file →

		@@ -1,8 +1,9 @@
	1	+/* File is Loaded via js only - FrmAnimate src: js/src/common/utilities/animation.js */
	2	+
1	3	/* fadeIn */
2	4	.frm-fadein {
3		- --frm-fadein-time: 400ms;
4		- animation: fadeIn var(--frm-fadein-time, 400ms) ease-in-out forwards;
	5	+ animation: fadeIn 400ms ease-in-out forwards;
5	6	}
6	7
7	8	.frm-fadein-up {
8	9	animation: fadeInUp 230ms ease-in-out forwards;
		@@ -8,95 +9,49 @@
8	9	animation: fadeInUp 230ms ease-in-out forwards;
9	10	}
10	11
11	12	.frm-fadein-up-back {
12		- animation: fadeInUpBack 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	13	+ animation: fadeInUpBack 500ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
13	14	}
14	15
15	16	.frm-fadein-down-short {
16		- --frm-fadein-down-short-time: 300ms;
17		- animation: fadeInDownShort var(--frm-fadein-down-short-time, 300ms) ease-out forwards;
	17	+ animation: fadeInDownShort 300ms ease-out forwards;
18	18	}
19		-
20		-.frm-fadeout {
21		- animation: fadeOut var(--fadeout-time, 400ms) ease-in-out forwards;
22		-}
23		-
24	19	/* END fadeIn */
25	20
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	21	/* cascadeFadeIn */
56	22	.frm-init-cascade-animation {
57		- transform: translateY(0);
58		- opacity: 1 !important;
	23	+ transform: translateY( 0px );
	24	+ opacity: 1.0 !important;
59	25	transition: 0.35s transform, 0.35s opacity linear;
60	26	will-change: transform;
61	27	}
62		-
63	28	.frm-init-cascade-animation > * {
64	29	transition: 0.3s opacity linear;
65	30	transition-delay: 0.1s;
66	31	}
67		-
68	32	.frm-init-cascade-animation.frm-animate {
69		- transform: translateY(7px);
70		- opacity: 0 !important;
	33	+ transform: translateY( 7px );
	34	+ opacity: 0.0 !important;
71	35	}
72		-
73	36	.frm-init-cascade-animation.frm-animate > * {
74		- opacity: 0;
	37	+ opacity: 0.0;
75	38	}
76		-
77	39	/* End cascadeFadeIn */
78	40
79	41	/* FadeIn 3d */
80	42	.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);
	43	+ opacity:0.0!important;
	44	+ 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	45	}
84		-
85	46	.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);
	47	+ opacity:1!important;
	48	+ 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	49	transition: 0.35s transform, 0.5s opacity linear;
89	50	}
90		-
91	51	/* END FadeIn 3d */
92	52
93		-.frm-background-highlight {
94		- animation: backgroundHighlight var(--highlight-time, 2750ms) ease-in forwards;
95		-}
96		-
97	53	@keyframes fadeIn {
98		-
99	54	0% {
100	55	opacity: 0;
101	56	}
102	57
		@@ -104,21 +59,9 @@
104	59	opacity: 1;
105	60	}
106	61	}
107	62
108		-@keyframes fadeOut {
109		-
110		- 0% {
111		- opacity: 1;
112		- }
113		-
114		- 100% {
115		- opacity: 0;
116		- }
117		-}
118		-
119	63	@keyframes fadeInUp {
120		-
121	64	0% {
122	65	opacity: 0;
123	66	transform: translateY(10px);
124	67	}
		@@ -129,9 +72,8 @@
129	72	}
130	73	}
131	74
132	75	@keyframes fadeInUpBack {
133		-
134	76	0% {
135	77	opacity: 0;
136	78	transform: translateY(32px);
137	79	}
		@@ -142,9 +84,8 @@
142	84	}
143	85	}
144	86
145	87	@keyframes fadeInDownShort {
146		-
147	88	0% {
148	89	opacity: 0.4;
149	90	transform: translateY(-2px);
150	91	}
		@@ -152,60 +93,5 @@
152	93	100% {
153	94	opacity: 1;
154	95	transform: translateY(0);
155	96	}
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		- }
211		-}
	97	+}