• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

paused를 했을 때

21.12.13 18:47 작성 조회수 100

0

박스에 마우스를 올리면 멈춤과 동시에 크기가 커지게 하고 싶은데 마우스를 올리면 멈추기만하고 상자의 크기에 변화가 없어요ㅠㅠ 뭐가 걸리는게 있는 것 같은데 머릿속에서 감만 잡히고 구체적인 답을 못찾겠습니다ㅠㅠㅠ

    .box:hover {

      animation-play-state: paused;

      transform-origin: 30% 80%;

      transform: scale(1.3);

    }

어떻게하면 마우스를 박스위에 올렸을 때 멈추면서 크기가 커지게할 수 있고, 위의 코드에서 잘못된점이 무엇인지 알려주세요! ( transform-origin: 30% 80%;을 지웠을 때도 그대로에요)

course-thumbnail

인터랙티브 웹 개발 제대로 시작하기

Animation 2

강의실 바로가기

답변 1

답변을 작성해보세요.

1

ODeorain님의 프로필

ODeorain

2021.12.15


일단 작성하신 코드에서 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>

이 글과 비슷한 Q&A