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

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.

By the way i'm sure my code. Other part of my code isn't mistake and they are working . Can you help me?

a div cannot be focused. use a button or a link – Temani Afif Mar 07 '21 at 13:47 — Temani Afif, Mar 07 '21 at 13:47

Gowtham Raj J · Accepted Answer · 2021-03-07T14:46:20.493

There is nothing wrong with your css. Its just, you can't focus a div normally by pressing Tab key. To tell the browser that the div can be focused, you need to add a tabindex of 0.

Note: Here to make it focusable, I have added a 0. But it can be a positive value also. Non-negative tabindex denotes the order in which the elements should be focused. Negative tabindex is focusable through 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>

(Doesn't **need** to be `0` though) – Kaiido Mar 07 '21 at 14:40 — Kaiido, Mar 07 '21 at 14:40
@Kaiido Yes, you are right. Let me add this info. – Gowtham Raj J Mar 07 '21 at 14:42 — Gowtham Raj J, Mar 07 '21 at 14:42

score -1 · Answer 2 · answered Mar 07 '21 at 13:59

-1

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

where u use this 500ms i think u use this timing duration

answered Mar 07 '21 at 13:59

Taisel akther

1
3

1

yes but i didn't understand relationship between each other. What should i do? – pzr Mar 07 '21 at 14:19
u try this system then see this result .btn:focus{ animation:kac_git 5s ease-in-out; – Taisel akther Mar 07 '21 at 14:45

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

2 Answers2