我正在學習影片，我想制作一個兩步影片：1. 元素掉落 2. 單擊它們開始脈動。不幸的是，在點擊之后元素會回到它們的初始位置（在下降影片之前）。我究竟做錯了什么？這是 Codepen 中的一個示例：https ://codepen.io/ju-rat/pen/VwMbZVL ? editors = 1010
這是代碼：
function pulsation() {
var elem = document.getElementsByClassName("bulb");
elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
elem[1].style.animation = "pulse 1s linear infinite 2s alternate";
elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate";
elem[3].style.animation = "pulse 1s linear infinite 2s alternate";
}html {
background-color: rgba(171, 183, 183);
}
* {
margin: 10px;
}
#container {
width: 100%;
display: flex;
}
#b1 {
height: 50px;
width: 50px;
border-radius: 100%;
background-color: red;
}
#b2 {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: yellow;
filter: none;
}
#b3 {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: green;
filter: none;
}
#b4 {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: blue;
filter: none;
}
#b2 {
animation: fall2 1s ease-out;
animation-delay: 0s;
animation-fill-mode: forwards;
}
@keyframes fall2 {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(400%);
}
}
#b3 {
animation: fall 2s ease-out;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes fall {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(400%) translateX(100%);
}
}
@keyframes pulse {
0% {
filter: none;
}
50% {
filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
}
100% {
filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
}
}
}<div id=c ontainer>
<div class="bulb" id="b1" onclick="pulsation()"></div>
<div class="bulb" id="b2"></div>
<div class="bulb" id="b3"></div>
<div class="bulb" id="b4"></div>
</div>
<p>Click on the red circle</p>uj5u.com熱心網友回復：
您覆寫fall 2s ease-out有pulse 0.5s linear，因此，相關的一切fall損失。
據我所知，沒有辦法在一個 CSS 影片中結合這兩種效果（脈沖和下降）。這是一個或另一個，但我在這里可能是錯的。至少，您可以欺騙并在每個燈泡內放置一個子元素，并將脈沖效果應用于它而不是燈泡本身：
function pulsation() {
var elem = document.getElementsByClassName("bulb");
elem[0].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
elem[1].children[0].style.animation = "pulse 1s linear infinite 2s alternate";
elem[2].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
elem[3].children[0].style.animation = "pulse 1s linear infinite 2s alternate";
}html {
background-color: rgba(171, 183, 183);
}
* {
margin: 10px;
}
#container {
width: 100%;
display: flex;
}
.bulb {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
}
#b1 {
background-color: red;
}
#b2 {
background-color: yellow;
filter: none;
animation: fall2 1s ease-out;
animation-delay: 0s;
animation-fill-mode: forwards;
}
#b3 {
background-color: green;
filter: none;
animation: fall 2s ease-out;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#b4 {
background-color: blue;
filter: none;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: inherit;
border-radius: 50%;
margin: 0;
}
@keyframes fall2 {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(400%);
}
}
@keyframes fall {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(400%) translateX(100%);
}
}
@keyframes pulse {
0% {
filter: none;
}
50% {
filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
}
100% {
filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
}
}<div id=c ontainer>
<div class="bulb" id="b1" onclick="pulsation()">
<div class="inner"></div>
</div>
<div class="bulb" id="b2">
<div class="inner"></div>
</div>
<div class="bulb" id="b3">
<div class="inner"></div>
</div>
<div class="bulb" id="b4">
<div class="inner"></div>
</div>
</div>
<p>Click on the red circle</p>（注意：我還清理了你的 CSS，減少了重復等）
uj5u.com熱心網友回復：
看起來你忘記添加transform: translateY(400%) translateX(100%);
脈沖影片了
function pulsation() {
var elem = document.getElementsByClassName("bulb");
elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
elem[1].style.animation = "pulse 1s linear infinite 2s alternate";
elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate";
elem[3].style.animation = "pulse 1s linear infinite 2s alternate";
}html {
background-color: rgba(171, 183, 183);
}
* {
margin: 10px;
}
#container {
width: 100%;
display: flex;
}
#b1 {
height: 50px;
width: 50px;
border-radius: 100%;
background-color: red;
}
#b2 {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: yellow;
filter: none;
}
#b3 {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: green;
filter: none;
}
#b4 {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: blue;
filter: none;
}
#b2 {
animation: fall2 1s ease-out;
animation-delay: 0s;
animation-fill-mode: forwards;
}
@keyframes fall2 {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(400%);
}
}
#b3 {
animation: fall 2s ease-out;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes fall {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(400%) translateX(100%);
}
}
@keyframes pulse {
0% {
filter: none;
transform: translateY(400%) translateX(100%);
}
50% {
filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
transform: translateY(400%) translateX(100%);
}
100% {
filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
transform: translateY(400%) translateX(100%);
}
}
}<div id=c ontainer>
<div class="bulb" id="b1" onclick="pulsation()"></div>
<div class="bulb" id="b2"></div>
<div class="bulb" id="b3"></div>
<div class="bulb" id="b4"></div>
</div>
<p>Click on the red circle</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/389666.html
標籤：javascript 动画片 css动画