如何使两个属性动画不同的持续时间
问题描述:
我有一个动画div和我动画2属性right:100px
和bottom:80px
。如何使两个属性动画不同的持续时间
筛选;
.demo{
background: url(http://www.clipartbest.com/cliparts/dT7/eoj/dT7eojnT9.jpeg) no-repeat;
height: 100px;
width:90px;
animation: smileDog 3s ease-in-out infinite;
position: absolute;
background-size:100%
}
@keyframes smileDog{
from{right:0px;bottom: 0px;}
to{right:100px;bottom: 80px;}
}
现在我的问题是,我可以在单个关键帧中管理动画计时吗?我的意思是right:100px
应该在3秒内移动,而bottom:80px
应该在10秒内移动。这两个举措应该同时开始并发生,但持续时间不同。 这可能吗?
如果没有,那我该怎么做?
答
您需要2个关键帧,然后:
.demo{
background: url(http://www.clipartbest.com/cliparts/dT7/eoj/dT7eojnT9.jpeg) no-repeat;
height: 100px;
width:90px;
animation: smileDogRight 3s ease-in-out infinite,
smileDogBottom 10s ease-in-out infinite;
position: absolute;
background-size:100%
}
@keyframes smileDogRight{
from{right:0px;}
to{right:100px;}
}
@keyframes smileDogBottom{
from{bottom: 0px;}
to{bottom: 80px;}
}
答
是的,这可以只是一个单一的animation
通过以下操作完成:
- 更改
animation-duration
到10s
(这是最大的两个动画效果)。 - 而不是
from
和to
关键帧规则使用百分比。例如,如果right: 0px
到right: 100px
需要在3秒内发生,那么它意味着动画持续时间的30%
。因此,在30%
指定right: 100px
但不指定bottom
的任何内容。 - 在
100%
(这不过是10s
)bottom:0px
到bottom: 80px
的完整动画效果也必须完成。因此,对于该关键帧规则,请指定right: 100px
和bottom: 80px
。 - 做上述将有
bottom
任意移动,直到3s
,但如果你希望它究竟内3s
移动30%的充满运动然后在30%
关键帧添加规则bottom: 24px
(80px的30%)。
.demo{
background: url(http://www.clipartbest.com/cliparts/dT7/eoj/dT7eojnT9.jpeg) no-repeat;
height: 100px;
width:90px;
animation: smileDog 10s ease-in-out infinite;
position: absolute;
background-size:100%
}
@keyframes smileDog{
0%{right:0px;bottom: 0px;}
30%{right:100px;}
100%{right:100px;bottom: 80px;}
}
Demo - 演示使用-webkit-
前缀。
Demo 2 - 对于4点
你可以只用一个动画做的,但要看是什么是确切的要求中提到的另一种方法。它应该移动到底部还是移动到底部,还是同时移动但是持续时间不同? – Harry 2014-10-11 12:47:17
雅你说得对,我想同时 – 2014-10-11 12:54:09