← All changes | css/admin/animations.css +13 -125 6.30 → 6.8.1 View file →

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