I have this script letting 2 characters move around 360degrees each. Now i have to add a pause of 4 seconds each time both have turned 180degrees. I have tried it with percentages but that doesnt work well. Either the letters will spin too fast or way too slow or the pause is not long enough.
Anyone has a solution for my problem?
<!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>Kind regards, Jorn Barkhof
You can't stop the animation when the animation started .
There is animation-delay but that delays the start of the animation, but after it's started it runs continuously.
The solution will be Keyframes with No Changes.
For more info please read this link.
https://css-tricks.com/css-keyframe-animation-delay-iterations/
First thing that you will do is to make the animation to be 14s
since you will need a 4s stop and 3s animate .
3s animate (180deg) + 4s stop (180deg) + 3s animate (360deg) + 4s stop (360deg) = 14s
animation: rotP 14s infinite linear;
animation: rotC 14s infinite linear;
After that you will need to calculate the percentage of the animation.
We will need to use to percentage since we will do the keyframes with no changes.
(3/14)*100 = 21.4% (For 3s) -- (4/14)*100 = 28.6% (For 4s)
(21.4% = 3s) animation and (28.6% = 4s) stop time. For the 14s period of time.
then initialize the percentage
0% + 21.4% = 21.4% [total time 3s] -- since (21.4% = 3s) animation
21.4% + 28.6% = 50% [total time 7s] -- since (28.6% = 4s) stop time
50% + 21.4% = 71.4% [total time 10s]
71.4% + 28.6% = 100% [total time 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);
}
} <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>Hope this helps