paused를 했을 때

일단 작성하신 코드에서 keyframes 안에도 transform:translate(값) scale(1); 하시고
.box:hover{transform:translate(값) scale(1.3); } 이런식으로 해주셔야 css 자체 충돌이 나지 않아요.
그치만 테스트를 해보니 역시 되지 않네요 ㅎㅎ
혹시나 해서 자바스크립트로 현재 translate의 값을 가져와서 강제로 반영시키면 되지 않을까 해서 해봤지만... 그래도 동작하지 않네요.
아마 animation-play-state를 pause시키면 keyframes 안에 정의된 속성들은 후에 아무리 몇번이고 선언해도 강제로 멈춰버리는것 같아요.

만일 정말로 마우스를 올렸을 때 1) 움직임을 멈추고 2) 크기는 키우고 싶으시다면

keyframes에서 움직이는걸 left, top값으로 하고, hover시 transform scale 값 주기
또는
keyframes에서 움직이는걸 transform의 translate 값으로 하고, hover시 width height 변화 주기

둘중에 하시면 될 것 같아요.

다음은 1번으로 진행한 예제입니다.
background 색이 변하다 마는거 보시면 바로 이해하실거에요

<!DOCTYPE html>
<html lang="ko">
<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>마우스 올리면 멈추고 커짐</title>
<style>
    *{margin:0;padding:0;box-sizing:border-box;}
    html,body{width:100%;height:100vh;overflow:hidden;}

    #myDiv{
        position:fixed; display:flex; justify-content:center; align-items:center;
        width:200px;height:200px; background:yellow; border:2px solid black;
        animation:moveBox 3s linear infinite alternate;
        transition:transform .5s;
    }

    @keyframes moveBox {
        0%{left:0;top:0;}
        50%{left:50%;top:0;}
        100%{left:50%;top:50%; background:coral;}
    }

    #myDiv:hover{
        animation-play-state:paused;
        transform:scale(2); color:white;
        background:black; /* keyframes 안의 속성들은 제대로 작동하지 않습니다. */
    }
   
</style>
</head>
<body>
    <div id="myDiv">HELLO WORLD</div>
</body>
</html>

인프런 커뮤니티 질문&답변