css Question posted in
Some basic documentation can be found here.

Css – Is there a way to replace keyframes with a specific linear timing function?

For example, I have this animation

@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;
}

try to use this linear (linear(0, 0.5 35%, 1 70%);）function to achieve same thing

@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%);
}

But I failed. how can I turn that into success?

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-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-iteration-count: infinite;
}
<div class="animate-fade-out-in">by @keyframes</div>

<div class="animate-fade-out-in-2">by timing fn</div>
Tags:

2

Answers


  1. 0

    Make the keyframes easy by using 100% for opacity: 0 then the linear() function should also be easy to define

    @keyframes fade-out-50-in-70 {
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}

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

.animate-fade-out-50-in-70 {
  animation-name: fade-out-50-in-70;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
div {
  height: 100px;
  background: red;
}
    <div class="animate-fade-out-in"></div>
<div class="animate-fade-out-50-in-70"></div>
    Login or Signup to reply.
  2. 0

    Why don’t you use cubic-bezier()?

    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: cubic-bezier(0, 0.5, 0.35, 1);
  animation-duration: 2s;
  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: cubic-bezier(0, 0.5, 0.35, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
    <div class="animate-fade-out-in"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search