CSS. animation

오 신기하다 움직인다 드디어!!!!

원활하게 내가 원하는 방향으로 보내진 못하지만, 

조금은, 아주 조금은 내가 의도하는 방향으로 나아가는 것 같아 보기 좋다!

 

그래서 씁니다 animation 꿀팁!

---

1. 이미지를 우선 만들자!

<div class="ship">
	<img src="ship.png" alt="통통배">
</div>

귀여운 배 사진을 불러왔다.

뭐 예시니까 이런 느낌의 배가 있다고 하자!

배경은 없고 배만 있다고 하자!

 

2. 이미지에 <style>을 입히자! (animation 제외)

ship이라는 class명을 부여 했으니 이제 이 것을 토대로 스타일을 입혀 보자!

 

<style>
        .ship {
            width: 300px;
            position: absolute;
            left: 0;
            bottom: 10vh;
            z-index: 17;
            animation-name: move;
            animation-duration: 40s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @keyframes move {
            0% {left: -30%;}
		10% {left: -10%}
            100% {left: 100%;}
        }
</style>

일단 이미지의 크기를 좀 조정하고...

z축 기준 다른 것 보다 얼마나 나와있는지 설정하구

이제 대망의 animation 부분! 다당~

 

 

3. animation을 입히자

animation-name: 애니메이션의 이름을 정하자!

animation-duration: 애니메이션이 몇 초 혹은 몇 분 동안 지속될 지 정하자!

animation-timing-function: 애니메이션의 전환을 어떤 시간간격으로 할지 정하자! 난 일정한 속력(linear)

animation-iteration-count: 애니메이션이 몇 번 반복될지 정하자! 난 infinite를 써서 영원히 반복됨ㅋㅋ

 

이걸 한 번에 쓰려면 animation만 쓰면 됨!

animation: ship 70s infinite linear;

뭐 이런 식으로!

 

4. @keyframes를 설정하자

@keyframes를 쓰고 그 옆에 내가 정한 animation-name을 쓴 후 중괄호를 열자!

이게 총 100%를 기준으로

0% 때는 어디에 있었으면 좋겠구

50% 때에는 어디에 있으면 좋겠구

마지막에는 여기서 끝났으면 좋겠어~ 이런걸 설정하면 된다

 

나는 사각형으로 움직이고 싶어서 top left 같이 쓰니까

대각선으로 감ㅋㅋㅋㅋㅋ 왜그런지는 아직 몰름 

 

하지만 다음번엔 꼭 정답을 알아서 오겠다1!!