为什么当我使用焦点代码时 CSS 动画不起作用？ [复制]答案

【问题标题】：Why CSS animation isn't working when i use focus code? [duplicate]为什么当我使用焦点代码时 CSS 动画不起作用？ [复制]
【发布时间】：2021-03-08 10:08:42
【问题描述】：

      <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            *{
                box-sizing: border-box;
                background-color: teal;
              }
            html{
                font-size: 2rem;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                overflow: hidden;
    
            }
            .btn{
                background-color: rgb(0, 204, 255);
                color: rgb(247, 247, 247);
               border: none;
               outline: none;
               font-size: 1rem;
               border-radius: 5em;
               padding-left:.5em;
               padding-right: .5em;
               padding-top:.5em;
               padding-bottom: .5em;
               cursor: pointer;
               
            }
   
            .btn:focus{
                animation:kac_git 500ms ease-in-out;
            }
            
            @keyframes kac_git {
                33%{  
                  transform: translate(100px,50px) rotate(30deg) scale(.9);
                }
                66%{
                    transform: translate(0px,25px) rotate(90deg) scale(.75);
                }
                100%{
                    transform: translate(-100px,-75px) rotate(200deg) scale(0);
                }
            }
        </style>
    </head>
    <body>
        <div class="btn">üzerime gel</div>
    </body>
    </html>

嗨，我是 css 新手，我的代码中的“.btn:focus”部分不起作用，我不明白为什么它不起作用。我尝试了其他编译器，但没有发现错误。

顺便说一句，我确定我的代码。我的代码的其他部分没有错，它们正在工作。你能帮帮我吗？

【问题讨论】：

div 无法聚焦。使用按钮或链接

标签： html css animation css-animations

【解决方案1】：

您的 CSS 没有任何问题。只是，您不能通过按Tab 键来正常聚焦div。要告诉浏览器div可以被聚焦，你需要添加一个为0的tabindex。

注意：为了使其可聚焦，我添加了一个 0。但它也可以是一个正值。非负 tabindex 表示元素应该聚焦的顺序。负 tabindex 可以通过 JS 聚焦。 More on tabindex in mdn

*{
 box-sizing: border-box;
 background-color: teal;
}
        html{
            font-size: 2rem;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }
 
        .btn{
            background-color: rgb(0, 204, 255);
            color: rgb(247, 247, 247);
           border: none;
           outline: none;
           font-size: 1rem;
           border-radius: 5em;
           padding-left:.5em;
           padding-right: .5em;
           padding-top:.5em;
           padding-bottom: .5em;
           cursor: pointer;           
        }

        .btn:focus {
            animation: kac_git 500ms ease-in-out;
        }
        
        @keyframes kac_git {
            33%{  
              transform: translate(100px,50px) rotate(30deg) scale(.9);
            }
            66%{
                transform: translate(0px,25px) rotate(90deg) scale(.75);
            }
            100%{
                transform: translate(-100px,-75px) rotate(200deg) scale(0);
            }
        }

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btn" tabindex="0">üzerime gel</div>
</body>
</html>

【讨论】：

（虽然不需要是0）
@Kaiido 是的，你是对的。让我添加此信息。

【解决方案2】：

    .btn:focus{
        animation:kac_git 500ms ease-in-out;

你在哪里使用这 500 毫秒我想你使用这个计时持续时间

【讨论】：

是的，但我不明白彼此之间的关系。我该怎么办？
你试试这个系统然后看到这个结果 .btn:focus{ animation:kac_git 5s ease-in-out;