-
Notifications
You must be signed in to change notification settings - Fork 2
/
flippers.css
35 lines (34 loc) · 1003 Bytes
/
flippers.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
.flipper {
display: inline-block;
margin: 0.1em;
transition-property: left, top, opacity;
transition-timing-function: ease;
transition-duration: .7s;
}
.flipper.added {
-webkit-animation: added 0.4s ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform-origin: 50% 200%;
}
.flipper.removed {
-webkit-animation: removed 0.4s ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform-origin: 50% -50%;
opacity: 0;
pointer-events: none;
}
@-webkit-keyframes added {
0% { -webkit-transform: translateZ(-40px) rotateX(0.25turn); opacity: 0; }
100% { -webkit-transform: translateZ(-40px) rotateX(0turn); opacity: 1; }
}
@-webkit-keyframes removed {
0% { -webkit-transform: translateZ(-40px) rotateX(0turn); opacity: 1; }
100% { -webkit-transform: translateZ(-40px) rotateX(0.25turn); opacity: 0; }
}
.layout-flippers,
.layout-flippers *,
.just-added {
transition: none !important;
-webkit-transition: none !important;
-webkit-transition-property: none !important;
}