[Flask] Aggregate your news and vote for the content you care about.
Same animation but with keyframes vs transitions.
app/static/styles/home.css
@@ -9,7 +9,7 @@
9
9
.tab-yes:hover ~ .feed-post {
10
10
left: 6%;
11
11
right: 0%;
12
Removed:
transition: var(--fast-transition);
12
Added:
transition: var(--fast-speed);
13
13
}
14
14
.tab-no {
15
15
height: 100%;
@@ -21,7 +21,7 @@
21
21
.tab-no:hover ~ .feed-post {
22
22
left: 0%;
23
23
right: 6%;
24
Removed:
transition: var(--fast-transition);
24
Added:
transition: var(--fast-speed);
25
25
}
26
26
27
27
/* Feed of posts. */
@@ -48,6 +48,10 @@
48
48
perspective-origin: bottom;
49
49
}
50
50
51
Added:
@keyframes post {
52
Added:
0% {}
53
Added:
100% {overflow: auto; height: 40%;}
54
Added:
}
51
55
.post {
52
56
position: relative;
53
57
height: 70%;
@@ -57,23 +61,27 @@
57
61
padding: 1rem;
58
62
margin: 1rem;
59
63
overflow: hidden;
60
Removed:
transition-duration: var(--fast-speed);
61
64
}
62
65
.post:hover {
63
Removed:
overflow: auto;
64
Removed:
height: 40%;
66
Added:
animation-name: post;
67
Added:
animation-duration: var(--med-speed);
68
Added:
animation-fill-mode: both;
65
69
}
66
70
.post:hover + .btn-wrapper {
67
Removed:
opacity: 100%;
68
Removed:
transform: rotateX(0deg);
71
Added:
animation-name: btn-wrapper;
72
Added:
animation-duration: var(--med-speed);
73
Added:
animation-fill-mode: both;
69
74
}
70
75
76
Added:
@keyframes btn-wrapper {
77
Added:
0% {}
78
Added:
100% {transform: rotateX(0deg); opacity: 100%;}
79
Added:
}
71
80
.btn-wrapper {
72
81
position: relative;
73
82
z-index: 1;
74
83
opacity: 0%;
75
84
transform: rotateX(-90deg);
76
Removed:
transition-duration: var(--med-speed);
77
85
}
78
86
79
87
.btn-yes {