animation 사용해 보았습니다.

css의 애니메이션을 사용한 적이 없었기 때문에 사용해 보았습니다.
(심플한 것이라면 의외로 간단했다!
위의 녹색 사각형에 마우스 오버 ⇒ 빨강 녹색 파란색 사각형이 움직이도록하고 있습니다.
(다른 요소를 css만으로 움직이겠지만 의외로 어려웠다)

sample.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./sample.css">
</head>

<body>
    <div class="test1"></div>
    <div class="test"></div>
</body>

</html>

sample.css

.test {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 400px;
    box-shadow: 50px 0px red, 100px 0px green, 150px 0px blue;
}

.test1 {
    width: 200px;
    height: 76px;
    margin: 0 auto;
    background-color: green;
}

.test1:hover+.test {
    animation: ue 1s forwards, shita 1s 1s forwards;
    animation-timing-function: ease-out;
}

@keyframes ue {
    from {
        margin-top: 400px;
    }
    to {
        margin-top: 100px;
    }
}

@keyframes shita {
    from {
        margin-top: 100px;
    }
    to {
        margin-top: 400px;
    }
}

Reference

이 문제에 관하여(animation 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/3chu/items/b7311e62fa0099eb694e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다