changed transition timing for all animations to use exponential function
This commit is contained in:
@@ -25,7 +25,7 @@
|
||||
color: var(--color-highlight);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--duration-animation) ease-out;
|
||||
transition: background-color var(--duration-animation) var(--anim-curve);
|
||||
}
|
||||
|
||||
.outlined-button:hover {
|
||||
|
||||
@@ -66,9 +66,9 @@
|
||||
line-height: 1.4rem;
|
||||
font-weight: 500;
|
||||
/* border: var(--border-width); */
|
||||
transition: color var(--duration-animation) ease-out,
|
||||
font-weight var(--duration-animation) ease-out;
|
||||
/* border-color var(--duration-animation) ease-out; */
|
||||
transition: color var(--duration-animation) var(--anim-curve),
|
||||
font-weight var(--duration-animation) var(--anim-curve);
|
||||
/* border-color var(--duration-animation) var(--anim-curve); */
|
||||
}
|
||||
a:link, a:visited, span {
|
||||
color: var(--color-highlight);
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
background-color: var(--color-background-highlight);
|
||||
backdrop-filter: blur(var(--blur-radius-background));
|
||||
padding: 12px;
|
||||
transition: background-color var(--duration-animation) ease-out;
|
||||
transition: background-color var(--duration-animation) var(--anim-curve);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(var(--blur-radius-background));
|
||||
transition: background-color var(--duration-animation) ease-out;
|
||||
transition: background-color var(--duration-animation) var(--anim-curve);
|
||||
}
|
||||
|
||||
.subtitled-img-container-centred {
|
||||
|
||||
@@ -107,8 +107,8 @@
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
/* transition: color var(--duration-animation) ease-out,
|
||||
background-color var(--duration-animation) ease-out; */
|
||||
/* transition: color var(--duration-animation) var(--anim-curve),
|
||||
background-color var(--duration-animation) var(--anim-curve); */
|
||||
}
|
||||
.toc-list a, .toc-list a:link, .toc-list a:visited {
|
||||
color: var(--color-text);
|
||||
|
||||
@@ -40,9 +40,9 @@
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
transition: background-color var(--duration-animation) ease-out,
|
||||
border-color var(--duration-animation) ease-out,
|
||||
backdrop-filter var(--duration-blur) ease-out;
|
||||
transition: background-color var(--duration-animation) var(--anim-curve),
|
||||
border-color var(--duration-animation) var(--anim-curve),
|
||||
backdrop-filter var(--duration-blur) var(--anim-curve);
|
||||
border: var(--border-dash-size) var(--border-style) transparent;
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.row-entry:hover .row-img {
|
||||
scale: 1.06;
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.row-img-container {
|
||||
@@ -67,7 +67,7 @@
|
||||
.row-img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
transition: scale var(--duration-animation) ease-out;
|
||||
transition: scale var(--duration-animation) var(--anim-curve);
|
||||
}
|
||||
|
||||
.row-text-container {
|
||||
|
||||
Reference in New Issue
Block a user