Question

我试图让一个对象引入一个CSS动画关键帧集，然后让它永远循环另一个关键帧集。这可能吗？

Answer 1

取决于您愿意做什么：）

我认为没有一种方法可以从第一个动画的最后一个关键帧内触发第二个动画。

可能的解决方案是将第二个动画延迟到第一个动画完成为止，

Sub Macro1()

    Dim Ws As Worksheet
    Dim Cel As Range, Cel7 As Range
    Dim Tmp As Variant
    Dim oCol As Long
    Dim x As Long, y As Long
    Dim m As Long, o As Long

    Set Ws = ActiveSheet
    x = Ws.Range("A4").Value
    y = Ws.Range("A5").Value
    oCol = 4

    Set Cel = Ws.Range("E6")
    Set Cel7 = Cel.Offset(2, 0)
    For m = 1 To x
        For o = 1 To y
            With Cel7
                Tmp = "C1"          ' avoid read/write to  sheet multiple times
                .Value = Tmp
                If IsEmpty(Tmp) Then
                    .Interior.Pattern = xlNone
                Else
                    .Interior.Color = vbBlack
                End If

                .HorizontalAlignment = xlCenter
                .VerticalAlignment = xlCenter
            End With
            Set Cel7 = Cel7.Offset(4, 0)
        Next o
        Set Cel = Cel.Offset(0, oCol)
        Set Cel7 = Cel7.Offset(0, oCol)
    Next m
End Sub

#test {
  height: 50px;
  width: 50px;
  background: grey;
  animation: 2s firstAnimation forwards, 1s secondAnimation 2s alternate infinite;
  /* the "2s" after "secondAnimation" is for the delay */
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

另一种可能的方法是使用JavaScript <div id="test"></div>进行验证，然后通过添加一个类来添加第二个动画，例如：

onanimationend

let test = document.getElementById("test")
test.onanimationend = function(event) {
  console.log(event) // contains a lot of interesting infos like the name of the animation that ended :)
  test.classList.remove("startFirstAnimation")
  test.classList.add("startSecondAnimation")
}

#test {
  height: 50px;
  width: 50px;
  background: grey;
}

.startFirstAnimation {
  animation: 2s firstAnimation forwards;
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

.startSecondAnimation {
  width: 100px !important; /* cheating a little bit here to keep the state of the end of the firstAnimation... */
  background: red !important;
  animation: 1s secondAnimation alternate infinite;
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

从一组关键帧开始CSS动画，然后循环播放另一组关键帧

1 个答案: