← All changes | css/admin/animations.css +82 -12 6.25 → trunk View file →

		@@ -1,7 +1,8 @@
1	1	/* fadeIn */
2	2	.frm-fadein {
3		- animation: fadeIn 400ms ease-in-out forwards;
	3	+ --frm-fadein-time: 400ms;
	4	+ animation: fadeIn var(--frm-fadein-time, 400ms) ease-in-out forwards;
4	5	}
5	6
6	7	.frm-fadein-up {
7	8	animation: fadeInUp 230ms ease-in-out forwards;
		@@ -7,53 +8,87 @@
7	8	animation: fadeInUp 230ms ease-in-out forwards;
8	9	}
9	10
10	11	.frm-fadein-up-back {
11		- animation: fadeInUpBack 500ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
	12	+ animation: fadeInUpBack 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
12	13	}
13	14
14	15	.frm-fadein-down-short {
15		- animation: fadeInDownShort 300ms ease-out forwards;
	16	+ --frm-fadein-down-short-time: 300ms;
	17	+ animation: fadeInDownShort var(--frm-fadein-down-short-time, 300ms) ease-out forwards;
16	18	}
	19	+
	20	+.frm-fadeout {
	21	+ animation: fadeOut var(--fadeout-time, 400ms) ease-in-out forwards;
	22	+}
	23	+
17	24	/* END fadeIn */
18	25
	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	+
19	47	/* slide down */
20	48	.frm-slide-down,
21	49	.frm-collapse-me {
22	50	animation: slideDown var(--slide-time, 2000ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
23	51	}
	52	+
24	53	/* END slide down */
25	54
26	55	/* cascadeFadeIn */
27	56	.frm-init-cascade-animation {
28		- transform: translateY( 0px );
29		- opacity: 1.0 !important;
	57	+ transform: translateY(0);
	58	+ opacity: 1 !important;
30	59	transition: 0.35s transform, 0.35s opacity linear;
31	60	will-change: transform;
32	61	}
	62	+
33	63	.frm-init-cascade-animation > * {
34	64	transition: 0.3s opacity linear;
35	65	transition-delay: 0.1s;
36	66	}
	67	+
37	68	.frm-init-cascade-animation.frm-animate {
38		- transform: translateY( 7px );
39		- opacity: 0.0 !important;
	69	+ transform: translateY(7px);
	70	+ opacity: 0 !important;
40	71	}
	72	+
41	73	.frm-init-cascade-animation.frm-animate > * {
42		- opacity: 0.0;
	74	+ opacity: 0;
43	75	}
	76	+
44	77	/* End cascadeFadeIn */
45	78
46	79	/* FadeIn 3d */
47	80	.frm-init-fadein-3d.frm-animate {
48		- opacity:0.0!important;
49		- 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	+ 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);
50	83	}
	84	+
51	85	.frm-init-fadein-3d {
52		- opacity:1!important;
53		- 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	+ 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);
54	88	transition: 0.35s transform, 0.5s opacity linear;
55	89	}
	90	+
56	91	/* END FadeIn 3d */
57	92
58	93	.frm-background-highlight {
59	94	animation: backgroundHighlight var(--highlight-time, 2750ms) ease-in forwards;
		@@ -59,8 +94,9 @@
59	94	animation: backgroundHighlight var(--highlight-time, 2750ms) ease-in forwards;
60	95	}
61	96
62	97	@keyframes fadeIn {
	98	+
63	99	0% {
64	100	opacity: 0;
65	101	}
66	102
		@@ -68,9 +104,21 @@
68	104	opacity: 1;
69	105	}
70	106	}
71	107
	108	+@keyframes fadeOut {
	109	+
	110	+ 0% {
	111	+ opacity: 1;
	112	+ }
	113	+
	114	+ 100% {
	115	+ opacity: 0;
	116	+ }
	117	+}
	118	+
72	119	@keyframes fadeInUp {
	120	+
73	121	0% {
74	122	opacity: 0;
75	123	transform: translateY(10px);
76	124	}
		@@ -81,8 +129,9 @@
81	129	}
82	130	}
83	131
84	132	@keyframes fadeInUpBack {
	133	+
85	134	0% {
86	135	opacity: 0;
87	136	transform: translateY(32px);
88	137	}
		@@ -93,8 +142,9 @@
93	142	}
94	143	}
95	144
96	145	@keyframes fadeInDownShort {
	146	+
97	147	0% {
98	148	opacity: 0.4;
99	149	transform: translateY(-2px);
100	150	}
		@@ -105,8 +155,9 @@
105	155	}
106	156	}
107	157
108	158	@keyframes slideDown {
	159	+
109	160	0% {
110	161	max-height: 0;
111	162	opacity: 0;
112	163	overflow: hidden;
		@@ -126,8 +177,9 @@
126	177	}
127	178	}
128	179
129	180	@keyframes backgroundHighlight {
	181	+
130	182	0% {
131	183	background-color: var(--primary-25);
132	184	}
133	185
		@@ -136,6 +188,24 @@
136	188	}
137	189
138	190	100% {
139	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;
140	210	}
141	211	}