src/client/app/animation.styl


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
	opacity: 1;
	transform: scaleY(1);
	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
	transform-origin: center top;
}
.zoom-in-top-enter,
.zoom-in-top-leave-active {
	opacity: 0;
	transform: scaleY(0);
}

.entranceFromTop {
	animation-duration: 0.5s;
	animation-name: entranceFromTop;
}

@keyframes entranceFromTop {
	from {
		opacity: 0;
		transform: translateY(-64px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes jump {
	0% { transform: translateY(0); }
	25% { transform: translateY(-16px); }
	50% { transform: translateY(0); }
	75% { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}