为什么 CSS 动画在我使用焦点代码时不起作用？

Question

      <!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>

Hi,i'm new in css and the ".btn:focus" part of my code isn't working and I don't understand why it isn't.i tried other compilers but not found mistake.

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

Answer 1

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

你在哪里使用这个 500ms 我认为你使用这个计时持续时间

Answer 2

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

注意：这里为了使其可聚焦，我添加了一个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>

为什么 CSS 动画在我使用焦点代码时不起作用？

Why CSS animation isn't working when i use focus code?

html

css

animation

css-animations