CSS3眨眼效果（animation动画循环间的“暂停”、“延时”执行）

今天上午一直在纠结这个眨眼效果，我是用CSS3的animation来切换图片形成眨眼的效果，图片如下：

效果实现了但是眨眼很不自然，眨眼间是没有暂停的无限循环，开始的css代码是这样的：

@keyframes eye{0% {background-position: 0 0;}33.3% {background-position: -74px 0;}66.6% {background-position: -152px 0;}100% {background-position: 0 0;}
}

我就想用js来控制在眨眼动作完成一次时暂停动画，然后再继续开始动画，但是弄半天还是不自然，失败告终，最后搜了一些眨眼效果的例子才发现，根本没必要用到js,这是后面修改的css代码：

@-webkit-keyframes eye{0% {background-position: 0 0;}2% {background-position: -74px 0;}4% {background-position: -152px 0;}8% {background-position: 0 0;}100% {background-position: 0 0;}
}

有没有看出不同？

之所以前面的代码实现的效果不自然，就是我把动画的整个过程三等分了，每个帧的切换时间是相同的，就没有任何的间隔感，不停的眨眼。而后面的代码，动画从0%到8%的时间内就把整个眨眼的过程完成了，剩下82%的时间都停留在动画最开始的睁眼的状态，就造成了一种动画暂停的假象，这就是我的标题暂停打引号的原因。

草稿demo也上传上来了，以便以后重用！
demo下载链接

CSS3眨眼效果（animation动画循环间的“暂停”、“延时”执行）相关推荐

android 实现控件搜索折叠效果 Animation动画折叠和普通折叠
android 实现控件搜索折叠效果 Animation动画折叠和普通控件直接折叠效果: 原理很简单,都是获取对应的高度,通过实现高度变化而改变显示效果: 话不多说直接上代码 1.普通折叠效果,以下是 ...
ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
为什么html中没有折叠效果,css3折叠效果
在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...
html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面然后通过有过渡(trans ...
CSS3 animation动画，循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{webkit-animation: ...
animation动画效果 1002 css3
animation动画效果 1002 css3 什么是动画使用步骤如何定义动画 @keyframes 动画名称{from{属性:值}percentage{属性:值}to{属性:值} } 或者 @k ...
css3中的animation的动画帧制作-卡通人物的走动效果
css3中的animation的动画帧制作-卡通人物的走动效果代码如下: <!DOCTYPE html> <html lang="en"> <hea ...
html动画效果停顿几秒,css3 animation动画执行结束，停顿几秒后重新开始执行
要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infi ...
11、CSS3的动画效果(animation)
1.动画效果(animation) animation属性值动画名称.动画时间.速度.延迟.次数 animation-name 规定需要绑定到选择器的keyframe名称 animation-dur ...

CSS3眨眼效果（animation动画循环间的“暂停”、“延时”执行）

CSS3眨眼效果（animation动画循环间的“暂停”、“延时”执行）相关推荐

最新文章

热门文章