Есть ли способ заменить ключевые кадры определенной функцией линейного времени? ⇐ CSS

[Anonymous]

Например, у меня есть такая анимация

Код: Выделить всё

@keyframes fade-out-50-in-70 {
0% { opacity: 1; }
50% { opacity: 0; }
70% { opacity: 1; }
100% { opacity: 1; }
}
.animate-fade-out-in {
animation-name: fade-out-50-in-70;
animation-timing-function: linear;
}

попробуйте использовать этот линейный (

Код: Выделить всё

linear(0, 0.5 35%, 1 70%);

)функция для достижения того же результата

Код: Выделить всё

@keyframes fade-out-in {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.animate-fade-out-in-2 {
animation-name: fade-out-in;
animation-timing-function: linear(0, 0.5 35%, 1 70%);
}

Но мне это не удалось. как я могу превратить это в успех?

Код: Выделить всё

div {
background: red;
width: 100px;
aspect-ratio: 1/1;
}
@keyframes fade-out-50-in-70 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animate-fade-out-in {
animation-name: fade-out-50-in-70;
animation-timing-function: linear;
animation-duration: 2s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}

@keyframes fade-out-in {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fade-out-in-2 {
animation-name: fade-out-in;
animation-timing-function: linear(0, 0.5 35%, 1 70%);
animation-duration: 2s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... g-function