css3帧动画无缝衔接会闪一下,CSS3 动画闪烁问题

今天在写一个简单的动画发现的问题

界面上面有一个按钮，点击按钮会弹出模态框，模态框的出现是一个动画 opacity 从 0 到 1；

我在按钮上面添加了一个 active 伪类 opacity 为 0.5；

当点击按钮的时候模态框根据动画弹出，但是按钮和模态框之间存在一直闪烁的问题，电脑上面看不出效果，手机上面闪烁效果明显，我这里是 一加 5T 手机，身边还有个 华为 P30 pro 试了下也是闪烁效果

我把 active 换成 hover 就没有闪烁的问题了

在网上找了一些答案说用 GPU 渲染，尝试后未能解决，虽然不用 active 就没有问题，但还是想搞明白为什么会有闪烁的问题！

import React, { memo, useCallback, useState, useEffect } from 'react';

import './index.scss';

const Test = memo((props) => {

const [showModal, setShowModal] = useState(false);

const phoneArr = useState([166, '****', 2751])[0];

useEffect(() => {

document.title = 'Demo'

}, [])

const handleShowModal = useCallback(() => {

setShowModal(true)

}, [])

const handleHideModal = useCallback(() => {

setShowModal(false)

}, [])

return

点我！

{

showModal &&

请确认是否为您本机号码?

{

phoneArr.map((item, index) => {

return {item}

})

}

}

})

export default Test;

.btn {

margin-top: 200px;

padding: 20px 0;

text-align: center;

background: #00c9e2;

color: #ffffff;

}

.btn:active {

opacity: 0.5;

}

.enter-phone-modal {

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: rgba(0, 0, 0, 0.2);

z-index: 2;

animation: modalShow 0.5s ease-out;

.modal-content {

margin: 1.135rem 0.4rem auto;

background: #ffffff;

border-radius: 0.1rem;

width: 2.95rem;

height: 2.005rem;

padding: 0.22rem 0.2rem;

.title {

font-family: PingFangSC-Regular;

font-size: 0.16rem;

color: #333333;

text-align: center;

line-height: 0.225rem;

text-align: center;

}

.phone-wrapper {

text-align: center;

padding: 0.135rem 0 0.13rem;

margin: 0.16rem 0 0.2rem;

font-family: PingFangSC-Medium;

font-size: 0.24rem;

color: #333333;

line-height: 0.335rem;

background:#fff;

border-radius: 0.06rem;

}

}

}

@keyframes modalShow {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}