테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

css 질문 채택완료

열린이글 3년 전 조회 2,158
답변 3
목록

<style>
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
 
    .test_obj {
        position: relative;
        animation: fadeInRight 1s;
    }
</style>
 
<div class="test_obj">테스트 중입니다.</div>

 

위 처러하면 글자가 우측에서 좌측으로 이동합니다 

그런데  여기서 1초 이따가 아래로 한 100ox 만큼 위치이동하려면 어떠게 

해야 하는 걸까요?

#css
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
m
myzone
3년 전

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

들레아빠 

</p>

<p>    .test_obj {

        position: relative;

        animation: fadeInRight 1s;

        transform: translate3d(0%,100px,0);

    }</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

플래토
플래토
3년 전

https://homzzang.com/b/css-173

 

홈짱님 홈피에 잘 설명되어있네요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인