У меня есть эта анимация windows 10 Simulator, которая работает с градиентом синего и красного. Эта анимация переходит с левого, который начинается с черного, на правый, который имеет красный цвет, затем переходит обратно с левого на черный, и тогда анимация заканчивается. Я пытаюсь найти способ приостановить / отключить анимацию после ее однократного запуска (слева направо, затем назад налево)
Чтобы освободить место для моей следующей анимации CSS, я не знаю, как это выполнить.
Существует ли простой атрибут css, позволяющий запускать анимацию только один раз?
<html>
<head>
<title>Windows 10 Simulator</title>
<link href="https://fonts.googleapis.com/
css?family=Noto+Sans|Open+Sans|PT+Sans|
Raleway|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<style onload>
html, body{
margin: 0;
padding: 0;
background-color: #000;
}
.wrapper {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #000000, #000000, #0095f0 ,#0095f0, #0095F0, #ff0000, #ff0000, #0095f0);
background-size: 1800% 1800%;
animation-iteration-count: 0;
animation-fill-mode: forwards;
animation: rainbow 30s ease infinite;
}
@keyframes rainbow {
0% {background-position: 0% 0%}
10%{background-position: 100%% 15%}
20%{background-position: 100% 30%}
30%{background-position: 100% 45%}
40%{background-position: 100% 60%}
50%{background-position: 100% 85%}
60%{background-position: 100% 90%}
70%{background-position: 100% 100%}
80%{background-position: 100% 90%}
90%{background-position: 100% 85%}
80%{background-position: 100% 45%}
100%{background-position:100% 15%}
}
span {
margin-top: 250px;
color: #fff;
font-size: 30px;
font-family: 'Raleway', sans-serif;
animation-name: flickerAnimation;
animation-duration: 5s;
animation-iteration-count: 1;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
#message{
font-size: 10px;
color: #fff;
animation-name: alertFade;
animation-duration: 4s;
opacity: 0;
animation-iteration-count: 1000;
margin-top: 620px;
}
span:nth-child(1) {
animation-delay: 1s;
animation-duration: 5s;
}
span:nth-child(2) {
animation-delay: 7s;
animation-duration: 7s;
}
span:nth-child(3) {
animation-delay: 15s;
}
span:nth-child(4) {
animation-delay: 22s;
}
@keyframes flickerAnimation{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: .0;}
}
@keyframes alertFade{
0% {opacity: .25}
50% {opacity: .75}
100% {opacity: .25}
}
</style>
<div class="wrapper">
<span>Hello! </span>
<span>Please Wait While We Setup</span>
<span>This Will Only Take a Few Seconds</span>
<span>Just a second...</span>
<div style="text-align: center;">
<p id="message" align="center">Please Do Not Turn
Off Your Device.</p>
</div>
</div>
</body>
</html>