我有这个脚本让2个角色各自移动360度。现在，我必须在每次180度变化时添加4秒的暂停。我用百分比尝试了它，但是效果不好。字母旋转得太快或太慢或暂停时间不够长。
任何人都有解决我问题的方法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<style>
.letter{
height: 80px;
z-index: 99;
position: absolute;
margin-top: 100px
}
.letter1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.letter2{
margin-left: 700px;
}
.letter3{
margin-left: 780px;
}
.letter4{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.letter5{
margin-left: 940px;
}
.letter6{
margin-left: 1020px;
}
.C {
position: absolute;
margin-left: 730px;
animation: rotC 3s infinite linear;
z-index: 1;
display: inline-block;
}
.P {
position: absolute;
margin-left: 730px;
animation: rotP 3s infinite linear;
z-index: 1;
display: inline-block;
/*animation-delay: move 3s infinite;*/
}
@keyframes rotC {
from {
transform: rotate(0deg)
translate(-130px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
}
@keyframes rotP {
from {
transform: rotate(0deg)
translate(130px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
}
</style>
<div class="vid"><!-- prycto-->
<img src="geknletters/P.png" alt="p" class="P letter">
<img src="geknletters/R.png" alt="r" class="letter2 letter">
<img src="geknletters/y.png" alt="y" class="letter3 letter">
<img src="geknletters/C.png" alt="c" class="C letter">
<img src="geknletters/T.png" alt="t" class="letter5 letter">
<img src="geknletters/o.png" alt="o" class="letter6 letter">
<video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
margin: 0;
width: 100%;
height: 100vh;
top:0;
left: 0;" >
</video>
</div>
</body>
</html>
亲切的问候， Jorn Barkhof
答案 0 :(得分：2)
动画开始时你无法停止动画。
有animation: rotP 14s infinite linear;
animation: rotC 14s infinite linear;
但会延迟动画的开始，但在它开始后它会持续运行。
解决方案将是没有变化的关键帧。
欲了解更多信息，请阅读此链接。
https://css-tricks.com/css-keyframe-animation-delay-iterations/
你要做的第一件事是让动画为14s
因为你需要4s停止和3s动画。
3s animate（180deg）+ 4s stop（180deg）+ 3s animate（360deg）+ 4s stop（360deg）= 14s
.letter{
height: 80px;
z-index: 99;
position: absolute;
margin-top: 100px
}
.letter1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.letter2{
margin-left: 700px;
}
.letter3{
margin-left: 780px;
}
.letter4{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.letter5{
margin-left: 940px;
}
.letter6{
margin-left: 1020px;
}
.C {
position: absolute;
margin-left: 730px;
animation: rotC 14s infinite linear;
z-index: 1;
display: inline-block;
}
.P {
position: absolute;
margin-left: 730px;
animation: rotP 14s infinite linear;
z-index: 1;
display: inline-block;
/*animation-delay: move 3s infinite;*/
}
@keyframes rotC {
0% {
transform: rotate(0deg)
translate(-130px)
rotate(0deg);
}
21.4% {
transform: rotate(180deg)
translate(-130px)
rotate(-180deg);
}
50% {
transform: rotate(180deg)
translate(-130px)
rotate(-180deg);
}
71.4% {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
100% {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
}
@keyframes rotP {
0% {
transform: rotate(0deg)
translate(130px)
rotate(0deg);
}
21.4% {
transform: rotate(180deg)
translate(130px)
rotate(-180deg);
}
50% {
transform: rotate(180deg)
translate(130px)
rotate(-180deg);
}
71.4% {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
100% {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
}
之后，您需要计算动画的百分比。
我们需要使用百分比，因为我们将执行关键帧而不做任何更改。
（3/14）* 100 = 21.4％（3s） - （4/14）* 100 = 28.6％（4s）
（21.4％= 3s）动画和（28.6％= 4s）停止时间。在14s的时间段。
然后初始化百分比
0％ + 21.4％= 21.4％ [总时间3s] - 自（21.4％= 3s）动画
21.4％+ 28.6％= 50％ [总时间7s] - 自（28.6％= 4s）停止时间
50％+ 21.4％= 71.4％ [总时间10s]
71.4％+ 28.6％= 100％ [总时间14s]
<div class="vid"><!-- prycto-->
<img src="geknletters/P.png" alt="p" class="P letter">
<img src="geknletters/R.png" alt="r" class="letter2 letter">
<img src="geknletters/y.png" alt="y" class="letter3 letter">
<img src="geknletters/C.png" alt="c" class="C letter">
<img src="geknletters/T.png" alt="t" class="letter5 letter">
<img src="geknletters/o.png" alt="o" class="letter6 letter">
<video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
margin: 0;
width: 100%;
height: 100vh;
top:0;
left: 0;" >
</video>
</div>public class SuperClass {
public static void write() {
System.out.println("Writing Super");
}
public void writeMore() {
System.out.println("super something");
}
}
public class SubClass extends SuperClass {
public static void write() {
System.out.println("Writing Sub");
}
public void writeMore() {
System.out.println("sub something");
}
}
public class Test {
public static void main(String[] args) {
SuperClass super = new SubClass();
super.write();
super.writeMore();
}
}
希望这有帮助