延迟与0.1秒的持续时间

我与CSS动画和关键帧功能有点问题......延迟与0.1秒的持续时间

我有闪烁的眼睛有点怪......眼睛会闪烁只是0.1S

然后我想要一个持续时间...然后动画应该循环。这是我的动画/关键帧：

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

这是我的动画属性：

animation: blinkingEyes 0.15s 1s infinite linear;

JSFIDDLE

我发现我开始和结束值之间的x％的一种变通方法。但是没有什么对我有用......我希望你能帮助我

来源

2017-06-12 Torben G

，我认为这就是你能真正做到。动画延迟仅影响动画启动需要多长时间。看到这个答案：https：//stackoverflow.com/a/13927380/854246。你将不得不延迟进入动画本身。 –

你需要几个关键帧，然后让动画无限次运行。

参见：

#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>

来源

2017-06-12 18:03:46 vals

如果只用一只眼睛眨眼一定要冷得多;）...加1 – LGSon

谢谢！但这个很容易... – vals

谢谢@vals它工作正常:) –

延迟与0.1秒的持续时间

回答

相关问题