Delay between CSS Animation with 0.1s duration

Question

i have a little issue with the css animation and keyframe feature...

i have a little monster with blinking eyes... the eyes should blink just 0.1s

And then i want to have a duration... and then the animation should loop. This is my animation/keyframe:

@keyframes blinkingEyes {
  0% {
    transform: rotateX(0deg);    
  }
  36% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(90deg);
  }
}

And this is my animation property:

animation: blinkingEyes 0.15s 1s infinite linear;

JSFIDDLE

I found a workaround with a x% between my start and end value. But nothing works for me.. i hope you could help me

I think that's all you can really do. Animation delay only affects how long it takes for the animation to kick off. See this answer: https://stackoverflow.com/a/13927380/854246. You're going to have to bake your delay into the animation itself. — Joseph Marikle, Jun 12 '17 at 17:25
Does this answer your question? [CSS animation delay in repeating](https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) — Mahozad, May 08 '22 at 09:29

score 2 · Accepted Answer · answered Jun 12 '17 at 18:03

You need several keyframes for this, and then make the animation run infinite times.

See:

#monster {
    margin-top: 60px;
    height: 93px;
    width: 75px;
    border-radius: 120px;
    background: yellow;
    /* text-align: center; */
    position: relative;
}
    

.eye {
  height: 12px;
  width: 8px;
  background: black;
  border-radius: 10px;
  margin-top: 30px; 
  float: left;
  animation: blinkingEyes 1.5s linear infinite;
}

.eyeLeft {  
  margin-left: 18px;  
}

.eyeRight {
    margin-left: 22px;
}

.mouth {
    font-weight: 900;
    transform-origin: 50% 50%;
    /* display: inline-block; */
    width: 5px;
    margin: 0 auto;
    height: 20px;
    /* text-align: center; */
    /* left: 47%; */
    position: absolute;
    top: 47px;
    transform: rotate(90deg);
    left: 35px;
}

@keyframes blinkingEyes {
  0%, 97%, 100% {
    transform: rotateX(0deg);    
  }
  98%, 99% {
    transform: rotateX(90deg);
  }
}

<div id="monster">
  <div class="monsterBody">  
    <div class="eye eyeLeft"> 
    </div>
    <div class="eye eyeRight">    
    </div>
    <div class="mouth">
      )
    </div>
</div>
</div>

Must be much cooler if to only blink with one eye ;) ... plus 1 — Asons, Jun 12 '17 at 19:21

Delay between CSS Animation with 0.1s duration

1 Answers1