-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanimation.css
134 lines (121 loc) · 4.39 KB
/
animation.css
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/**************************************************/
/*************** animation specific ***************/
/**************************************************/
/* This is an adaptation of this clever technique: https://cssanimation.rocks/watch/ */
.progress-indicator-wrapper {
position: relative;
width: 140px;
height: 140px; }
.avatar.mod-call-progress {
position: absolute;
top: 5px;
left: 5px;
z-index: 1; }
.dial-container {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
width: 70px; }
.is-pulsing .dial-container {
-webkit-animation: pulse .5s ease-out infinite alternate;
animation: pulse .5s ease-out infinite alternate; }
.wedge {
height: 140px;
width: 70px; }
.is-running .wedge {
-webkit-animation-play-state: running !important;
animation-play-state: running !important; }
.is-pulsing .wedge {
background-image: none !important;
background-color: #e82e0b; }
.container1 {
left: 70px;
-webkit-transform-origin: left center;
transform-origin: left center; }
.container1 .wedge {
-webkit-animation: rotate-bg-1 9s linear both paused, bg-color 9s linear both paused;
animation: rotate-bg-1 9s linear both paused, bg-color 9s linear both paused;
background-image: -webkit-linear-gradient(white 0%, #FAD961 90%);
background-image: linear-gradient(white 0%, #FAD961 90%);
/* The background size needs to be huge so we can show the correct color at the junction between the two wedges. So clever. */
background-size: 100% 2000%;
border-radius: 0 140px 140px 0;
left: 0;
-webkit-transform-origin: left center;
transform-origin: left center; }
.container2 {
left: 0;
-webkit-transform-origin: right center;
transform-origin: right center; }
.container2 .wedge {
-webkit-animation: rotate-bg-2 9s linear both paused, bg-color 9s linear both paused;
animation: rotate-bg-2 9s linear both paused, bg-color 9s linear both paused;
background-image: -webkit-linear-gradient(bottom, #FAD961 10%, #e82e0b 50%);
background-image: linear-gradient(to top, #FAD961 10%, #e82e0b 50%);
/* The background size needs to be huge so we can show the correct color at the junction between the two wedges. So clever. */
background-size: 100% 2000%;
background-position: bottom;
border-radius: 140px 0 0 140px;
-webkit-transform-origin: right center;
transform-origin: right center; }
/* First animation. We rotate the wedge into view and resize the bg so that it always show the color we want at the junctions. The intermediate step is used to have a slightly more progressive transition. */
@-webkit-keyframes rotate-bg-1 {
0% {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg); }
25% {
background-size: 100% 500%; }
50%, 100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
background-size: 100% 100%; } }
@keyframes rotate-bg-1 {
0% {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg); }
25% {
background-size: 100% 500%; }
50%, 100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
background-size: 100% 100%; } }
/* Second animation. We rotate the wedge into view and resize the bg so that it always show the color we want at the junctions. The intermediate step is used to have a slightly more progressive transition. */
@-webkit-keyframes rotate-bg-2 {
0%, 50% {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg); }
75% {
background-size: 100% 500%; }
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
background-size: 100% 100%; } }
@keyframes rotate-bg-2 {
0%, 50% {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg); }
75% {
background-size: 100% 500%; }
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
background-size: 100% 100%; } }
@-webkit-keyframes bg-color {
0% {
/*background-color: #FAD961;*/ }
100% {
/*background-color: #e82e0b;*/ } }
@keyframes bg-color {
0% {
/*background-color: #FAD961;*/ }
100% {
/*background-color: #e82e0b;*/ } }
@-webkit-keyframes pulse {
100% {
-webkit-transform: scale(1.05);
transform: scale(1.05); } }
@keyframes pulse {
100% {
-webkit-transform: scale(1.05);
transform: scale(1.05); } }