个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
在动画真正开始之前，从目标点到初始点有动画的闪烁。如果你第二次运行它，它会很明显。
我必须在同一个页面上多次使用它。因此我需要它不闪烁。
@-webkit-keyframes sjl {
from {
background-position: 0px -5000px;
}
to {
background-position: 0px 0px;
}
}
@-moz-keyframes sjl {
from {
background-position: 0px -5000px;
}
to {
background-position: 0px 0px;
}
}
@-ms-keyframes sjl {
from {
background-position: 0px -5000px;
}
to {
background-position: 0px 0px;
}
}
@-o-keyframes sjl {
from {
background-position: 0px -5000px;
}
to {
background-position: 0px 0px;
}
}
@keyframes sjl {
from {
background-position: 0px -5000px;
}
to {
background-position: 0px 0px;
}
}
.sjl
/*Squirrel jump left*/
{
width: 300px;
height: 250px;
-webkit-perspective: 1000; //tried to use this and the 3 lines below but in every combination, even placing it in body but doesn't solve the problem
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0, 0, 0);
-webkit-animation: sjl 1.5s steps(20) alternate;
-moz-animation: sjl 1.5s steps(20) alternate;
-ms-animation: sjl 1.5s steps(20) alternate;
-o-animation: sjl 1.5s steps(20) alternate;
animation: sjl 1.5s steps(20) alternate;
background-image:url(http://s9.postimg.org/io6wluqhb/Sjl.png) !important;
position: absolute;
float: left;
top: 120px;
left: 10px;
z-index: 999;
}
最佳答案
animation-timing-function 中的 steps 属性有点误导。
如果您有 20 张图片，那么如果步数不是 20，则为 19。数字越小越清晰。如果只有 2 个状态，则步数仅为 1。
因此，您将在动画结束时重复第一帧。
您还需要调整关键帧的 background-position 属性，最后一个值不应该是图像的总大小，而是到达那里的位移。另一种计算方法是它是您当前值的 19/20。
here 您可以并排看到 2 个动画。请注意，在左侧(原始的)中，有一个错误的框架，它没有出现在右侧的框架中。
@-webkit-keyframes sjl {
from { background-position: 0px -5000px; }
to { background-position: 0px 0px; }
}
@keyframes sjl {
from { background-position: 0px -5000px; }
to { background-position: 0px 0px; }
}
.sjl
{
width: 300px;
height: 250px;
-webkit-animation: sjl 2s steps(20) alternate infinite;
animation: sjl 2s steps(20) alternate;
background-image:url(http://s9.postimg.org/io6wluqhb/Sjl.png) !important;
position: absolute;
z-index: 999;
}
@-webkit-keyframes sjlok {
from { background-position: 0px -4750px; }
to { background-position: 0px 0px; }
}
@keyframes sjlok {
from { background-position: 0px -4750px; }
to { background-position: 0px 0px; }
}
#ok {
left: 300px;
-webkit-animation: sjlok 2s steps(19) alternate infinite;
animation: sjlok 2s steps(19) alternate;
}<body>
<div class="sjl"></div>
<div class="sjl" id="ok"></div>
</body>关于jquery - CSS3动画中的闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28901065/
26
4
0
我是 Jetpack Compose 的新手。我目前正在开发一个聊天应用程序。我要求用户从图库中选择图像或从相机中拍照。然后我将文件 Uri 保存到数据库中，然后收听所有消息的列表。更新此列表时，此图
强制性代码，但 jsFiddle 准确地演示了这个问题。我有一个在 3 秒内扩大和淡出的圆圈。声纳风格是我的意图。问题是动画完成后它会快速“闪烁”然后重新开始。 请在此处查看问题:http://jsf
您好，我有一个多种颜色的 Logo ，我想将其用于随机/不稳定的故意闪烁效果。我只能找到其他关于使用淡入/淡出功能进行闪烁技巧的文章。关于如何用 css3 和/或 jQuery 做这样的技巧有什么想法
我正在使用 Swing 创建组件并使用 GLCanvas (com.jogamp.opengl.awt.GLCanvas) 创建我的窗口。 接下来就是问题了 在初始状态下，一切正常，但是当我拖动窗口调
我将 PhoneGap 2.2.0 与 jQuery Mobile 1.2.0 结合用于我在 Android 平台(版本 2.3.3 及更高版本)上的应用程序。在我使用固定标题的页面上，根本没有转换。
在我们使用 JavaScript 向页面添加图像或文本后，我们的网页在 iPad 上闪烁。我们尝试了 -webkit-backface-visibility:hidden; 的各种组合； -webki
有人能告诉我为什么在这个使用 SwingWorker 的简单演示中，屏幕闪烁，好像按钮不断跳跃一样？ (关于改进多线程部分的反馈也值得赞赏)。 import java.awt.EventQueue;
我正在运行时从 CSV 文件向字符串网格添加多行，但是 StringGrid 在更新时似乎会闪烁很多，我认为会有一个 beginupadate/Endupdate 命令来停止此操作。但是我找不到它。有
我的窗口中有一个文本元素，我希望它每隔几秒或几毫秒闪烁一次或出现并消失。 我的代码是: import QtQuick 2.6 import QtQuick.Window 2.2 Window {
我的窗口中有一个文本元素，我希望它每隔几秒或几毫秒闪烁一次或出现并消失。 我的代码是: import QtQuick 2.6 import QtQuick.Window 2.2 Window {
我在UIButtons中有3个UIView，它们具有相同的文本颜色和相同的背景颜色。轻按三个按钮即可触发相应的事件。但是只有其中之一会响应触摸而“闪烁”。其他两个会发生什么？它们有时(但很少)具有“闪
我在 iOS 8 下实现 UIRefreshControl 时遇到了一种闪烁。每次我第一次到达 tableView 的顶部时(即应用程序刚刚启动时)，我都会看到下面的 gif 中显示的闪烁。这不会发生
我希望有人能帮助我。我遇到以下问题: http://jsfiddle.net/zhPAF/ 标记: About Us
当鼠标悬停在图像“A”上时，尝试让图像“B”覆盖在图像“A”上。理想情况下，我希望它淡入。 HTML: jQuery:
我有一个 TabControl，我可以在其中添加/删除多个 TabPage。 当我添加足够多的页面以至于必须显示导航按钮时，我遇到了闪烁问题。 当导航按钮(左右导航的 2 个箭头)未显示时，我根本没有
我尝试实现自定义双缓冲，但它会导致闪烁。 这是控件(继承自Control的自定义控件)构造函数中的代码: bufferContext = new BufferedGraphicsContext();
我有以下代码: var footer = $('.footer'), extra = 0; // footer.css({ opacity: '0', display: 'block' });
我遇到了与 JPanel 中闪烁相关的问题。不知道为什么， window 里的球时不时地闪烁。我尝试了几种方法，比如双缓冲、BufferStrategy、Canvas，但都不起作用。主要思想是使用线程
我试图在 OpenGL 中绘制一些文本，而程序绘制立方体或任何 Opengl native ，因此，当我尝试将文本放在屏幕上时，它闪烁得非常快，我不知道为什么，我试图改变 sleep 值什么都没有..
我已经使用 LibGDX UI Setup 启动了一个项目。 我在 implements ApplicationListener 中唯一拥有的是: public void create() {
我是一名优秀的程序员,十分优秀！