悬停时的 CSS 脉冲动画覆盖

问题描述

我有一个脉冲圆，需要能够在悬停时停止脉冲，然后缩放到正确的大小。

fun setoneTimeRequest(numbersList: List<Int>,operator: Operator,duration: Long) {
        val workManager = WorkManager.getInstance(applicationContext)

        val data: Data = Data.Builder()
            .putString(KEY_OPERATOR,operator.toString())
            .putIntArray(KEY_NUMBER_LIST,numbersList.toIntArray())
            .build()

        val mathQuestionRequest = OneTimeWorkRequest.Builder(CalculatorWorker::class.java)
            .setinitialDelay(duration,TimeUnit.SECONDS)
            .setInputData(data)
            .addTag(equation)
            .build()

        workManager.enqueue(mathQuestionRequest)
        workManager.getWorkInfoByIdLiveData(mathQuestionRequest.id)
            .observe(this,Observer {
                // SUCCEEDED RUNNING ENQUEUED STATE
                val textString = equation + "     " + it.state.name + "\n"
                textView.text = textString
                text_enter_equation.setText(it.state.name)
                if (it.state.isFinished) {
                    val result: Int = it.outputData.getInt(CalculatorWorker.KEY_RESULT,0)
                    text_seconds.text = result.toString()
                }
            })

        val outputWorkInfos: LiveData<List<WorkInfo>>

        outputWorkInfos = workManager.getWorkInfosByTagLiveData(equation)

        outputWorkInfos.observe(this,workInfosObserver())
    }

    fun workInfosObserver(): Observer<List<WorkInfo>> {
        return Observer { listofWorkInfo ->

            if (listofWorkInfo.isNullOrEmpty()) {
                return@Observer
            }

            val workInfo = listofWorkInfo[0]

            var output = " "
            output += equation + "         " + workInfo.state.toString() + "\n"
            if (workInfo.state.isFinished) {
                textView.text=output
            } else {
                textView.text=output
            }
        }
    }

我希望它做的是将悬停比例从动画中的任何位置调整到正确的大小。

即如果它当前是缩小尺寸的比例（1.2），则在悬停时返回比例（1.33）。

--注意：这应该过渡，而不仅仅是捕捉到那个尺寸。

这可以用 css 实现吗？我需要使用其他魔法吗？

这是一个 jsfiddle 示例。

解决方法

只需从 scale(1) 中删除 100%。你也不需要暂停动画

html,body {
  padding: 20px;
}

@keyframes pulse {
  0%,100% {
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(1.33);
  }
}

.circle {
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 30px;
  width: 30px;
  animation: pulse 2s infinite;
}

.circle:hover {
  transform: scale(1.33);
  /* animation-play-state: paused; */
}

<div class="container">
  <div class="circle"></div>
</div>

为了过渡的想法：

html,100% {
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(1.33);
  }
}

.circle {
  width: 40px;
}
.circle::before {
  content:"";
  display:block;
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 40px;
  box-sizing:border-box;
  animation: pulse 2s infinite;
}

.circle:hover {
  transform: scale(1.33);
  transition:1s;
}
.circle:hover::before {
  animation: none;
}

<div class="container">
  <div class="circle"></div>
</div>

,

动画属性将始终覆盖普通属性。您可以使用 CSS 变量来覆盖动画属性。

var(--expected-variable-if-exist,default)

html,100% {
    transform: scale(var(--scale,1));
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(var(--scale,1.33));
  }
}

.circle {
  border-radius: 50%;
  border: 5px solid #f0f;
  height: 30px;
  width: 30px;
  animation: pulse 2s infinite;
}

.circle:hover {
  --scale: 1.33;
  animation-play-state: paused;
}

<div class="container">
  <div class="circle"></div>
</div>