- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不明白如何在一段固定的时间内运行动画。
这是动画的来源:
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
}
所以我修改了我想要应用 pulse
的元素的 css。
-webkit-animation-duration: 10s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 10;
据我了解文档,动画应该运行 10 次,每次 10 秒。所以,总共 100 秒。但这是错误的。将动画生命周期指定为 100 秒的正确方法是什么?
最佳答案
好吧,所以你说你得到的计时功能不正确,我不同意,当你将动画持续时间设置为 10s
时,第一个周期为 5s ,并在接下来的 5 秒内让您的 div
横向扩展。
我在这里使用 JavaScript 倒计时,并且还使用设置为 1 秒的 animation-delay
属性,只是为了与我从 here 中获取的 JavaScript 倒计时同步。 ...
因此,如果您看到,动画在 1
处完美结束,因此它可以完美运行,如果您希望做其他事情,请发表评论,我会相应地修改我的答案..
Demo (我已将动画迭代减少到 2 = 20 秒)
Note: Use Chrome to see the Demo as OP is using only
-webkit
and haven't requested any code for Firefox or Internet Explorer.
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(2);
transform: scale(2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
-webkit-animation-duration: 10s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 2;
position: absolute;
left: 50%;
font-size: 50px;
top: 10%;
}
关于Css 动画生命周期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21350194/
我正在开发一个使用多个 turtle 的滚动游戏。玩家 turtle 根据按键命令在 Y 轴上移动。当危害和好处在 X 轴上移动时,然后循环并改变 Y 轴位置。我尝试定义一个名为 colliding(
我不明白为什么他们不接受这个作为解决方案,他们说这是一个错误的答案:- #include int main(void) { int val=0; printf("Input:- \n
我正在使用基于表单的身份验证。 我有一个注销链接,如下所示: 以及对应的注销方法: public String logout() { FacesContext.getCurren
在 IIS7 应用程序池中有一个设置 Idle-time out 默认是 20 分钟,其中说: Amount of time(in minutes) a worker process will rem
我是一名优秀的程序员,十分优秀!