我正在制作一段动画,想了解关键帧在其中的作用。
我希望展示一个元素3秒钟,淡出1秒钟,等待3秒钟,淡入1秒钟,再可见3秒钟。总共8秒钟(3+1+3+1)。
我不知道如何将其编写为关键帧。由于使用百分比,我的动画中设置了交替。以下是我目前拥有的内容:
我希望展示一个元素3秒钟,淡出1秒钟,等待3秒钟,淡入1秒钟,再可见3秒钟。总共8秒钟(3+1+3+1)。
我不知道如何将其编写为关键帧。由于使用百分比,我的动画中设置了交替。以下是我目前拥有的内容:
time = 0;
window.addEventListener("load", function() {
setInterval(function() {
var label = document.getElementById("label");
if (time==0) {
label.innerHTML = ++time;
}
else {
label.innerHTML = ++time;
}
if (time>=8) time = 0;
}, 1000);
})
* {
margin: 0;
padding: 0;
font-family:sans-serif;
}
#Icons_A0 {
position: absolute;
box-sizing: border-box;
transform: translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
border: 1px solid #A1A1A1;
background: #E5E5E5;
width: 234px;
height: 238px;
background-color: rgba(255,255,255,1);
overflow: hidden;
opacity: 1;
}
#Rectangle_175 {
opacity: 1;
fill: rgba(75,134,193,1);
stroke: rgb(84, 75, 193);
stroke-width: 4px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_175 {
position: absolute;
overflow: visible;
width: 134.35028076171875px;
height: 134.3502655029297px;
left: 49.825px;
top: 76.825px;
transform: rotate(45deg);
transform-origin: left;
}
#Ellipse_49 {
opacity: 1;
fill: rgba(180,180,180,1);
stroke: rgb(112, 112, 112);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Ellipse_49 {
position: absolute;
overflow: visible;
width: 56px;
height: 56px;
left: 72px;
top: 51px;
animation: fadein 8s linear 0s infinite alternate;
}
@keyframes fadein {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="Icons_A0">
<svg data-name="Rectangle 175" data-type="Rectangle" class="Rectangle_175">
<rect id="Rectangle_175" rx="0" ry="0" x="0" y="0" width="120" height="70">
</rect>
</svg>
<svg class="Ellipse_49">
<ellipse id="Ellipse_49" rx="28" ry="28" cx="28" cy="28">
</ellipse>
</svg>
<span id="label"></span>
</div>