css3动画不断变化(css3 animation change continuously)
我正在尝试实现CSS3动画….我打算改变我的动画影响不断循环，但问题是一个周期后，它停止在红色，它不会进一步改变它的颜色….如何继续循环…
在下面提供我的代码
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
i am trying to implement css3 animations…. i am planning to change my aimations affects continuously in cycle but the problem is after one cycle it stops in red color it does not change its color further…. how to continue the cycle…
providing my code below
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
原文：https://stackoverflow.com/questions/13768706
更新时间：2020-01-23 19:38
最满意答案
animation:myfirst 5s linear infinite;
—-^—–
您需要指定动画将永久循环。
另外，如果你想让动画平滑，你需要让它开始和结束的值相同：
0%,100% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75% {background:green;}
animation:myfirst 5s linear infinite;
—-^—–
You need to specify that the animation is going to loop forever.
Also, if you want the animation to be smooth, you’ll need to have it start and end with the same value:
0%,100% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75% {background:green;}
相关问答
animation-fill-mode: forwards;
很可能是你在寻找什么。 来源： CSS动画属性在动画后保留 animation-fill-mode: forwards;
is most likely what you were looking for. Source: CSS Animation property stays after animating
有了这张图片，你不能。 CSS正在做它应该做的事(无限重复)，但图像本身并不连续。 你需要的是一幅图像的最后一帧与第一帧相同，这样当动画结束时，它看起来好像从未停止过。 您可以通过制作超长图像并沿图像轴旋转图像来达到此效果，但是这种效果对某些图像比其他图像效果更好。 像这样的东西： 无论如何，这里是结果： http : //jsfiddle.net/Tu95Y/751/ @-webkit-keyframes slide {
from{
background-position:172
…
我发现了怎么做！ 同时删除和添加相同的类不会产生影响。 因此，您必须克隆该元素，然后删除旧元素以重新启动动画。 seconds = …; // calculating seconds left
if(last_seconds !== seconds){
var el = $(“#sp_seconds”);
var newone = el.clone(true);
el.before(newone);
$(“.” + el.attr(“class”) + “:
…
我认为这只是当前硬件加速实现的限制。 一旦动画开始，关闭它。 (民间智慧 – 它被认为是一个不错的主意，给你想要动画的块提供非常大的尺寸(又称宽度：13000px) – 它使GPU创建巨大的对象) I think this is just a limitation of the current hardware acceleration implementations. Once the animation starts, off it goes. (Folk wisdom – it’s said
…
您必须为动画命名…然后将该动画应用为属性… @-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-colo
…
你的代码看起来不错。 您可以运行以下代码以查看它是否正常工作： fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:for
…
看到这里： http : //jsfiddle.net/9CZFS/1/ animation:myfirst 5s linear infinite;
—-^—–
您需要指定动画将永久循环。 另外，如果你想让动画平滑，你需要让它开始和结束的值相同： 0%,100% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75% {background:gre
…
如果要为元素指定多个变换，则应将它们设置为与空格分隔值相同的属性，而不是在下一个变换中添加第二个transform属性。 如果以这种方式执行，那么最新的transform将覆盖先前在同一关键帧中提供的transform 。 例如，在下面的关键帧中，只有transform: translateZ(0px)有一个值。 0% {
transform: translateX(0%);
transform: translateZ(0px);
}
#slideshow {
width
…
有两种方法可以做到这一点。 一种是使用伪元素管理内容。 这意味着显示的内容将应用于CSS; 喜欢这个： CSS h1:before{
content: ‘Original Text’;
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size
…
最简单的方法可能是在每个屏幕外页面上添加另一个类，例如.left和.right ，将页面放在屏幕之外，可以使用left: CSS属性。 要将页面带到屏幕上，您将删除.left类并将其更改为.current 。 要为转换设置动画，您需要在.page类上使用CSS规则，例如： -webkit-transition: left 1s linear;
The simplest way is probably to add another class to each offscreen page, suc
…