( 공부복습 ) 실무 애니메이션 표현

▶ animation : 동적인 다양한 스타일 전환을 표현하기 위해 사용하는 속성(부드럽게 스타일 변화)

        1. 요소 - 이름부여 >> ANIMATION-NAME
        2. 키프레임 - 스타일  >>  @KEYFRAMES NAME{...}

[ animation을 위해 함께 사용 = @keyframes(키프레임) ]
   - 키프레임 내에  특정한 시간에 따라 표현해야할 요소의 스타일을 표기 
   : 애니매이션이 변경되는 지점 설정  

        3. 어떤 애니메이션?
        >>예를 들어  빠른속도 혹은 느린속도로 진행했으면 한다 등
            디테일한 속성들을 같이 정리하면서 나타낼 수 있음

ex)
   @keyframes 이름 {
      from,0%{ 시작스타일을 표기 }
      to,100%{ 끝스타일을 표기 }
    }

[ animation 속성의 종류 ]

   - animation-name : 애니메이션 이름 지정  
       └  ex)aa
   
   - animation-delay : 애니메이션 효과에 대한 지연시간 지정  
       └  ex) 1s > 1초후 시작 
   
  
   - animation-direction : 애니메이션 동작이 시작되는 뱡향 설정  
      └ normal  기본값, 시작~끝 
      └ alternate  from <---> to 반복  
      └ reverse 역방향 움직임 
      └ alternate-reverse 역방향 움직인 후 정방향 움직임 
     

   - animation-duration : 애니메이션 실행 시간 지정  
       └  ex) 1s > 1초  

  
   - animation-iteration-count : 애니메이션 효과의 반복 설정
      └ 숫자값 = 횟수반복   
      └ infinite = 무한반복
  

   - animation-timing-function : 애니메이션 이징 효과 / 이징=시간당 움직이는 속도의 양 값   
      └ linear : 시작과 끝까지 같은속도 / 일정한 속도로 진행
      └ ease : 기본값. /  처음에는 천천히 시작 ~ 점점 속도 ~ 마지막에 천천히 끝
      └ ease-in : 속도의 시작을 느리게.
      └ ease-out : 속도를 느리게 끝. 
      └ ease-in-out : 느리게 시작하고, 느리게 끝  
     ★ 새로추가된 공부내용 
     cubic-bezier : cubic-bezier(n,n,n,n)  사용자 정의에 따라 그래프의 4개의 구간을 변형가능 


   - animation-play-state : 애니메이션 효과의 재생 혹은 중지.  
      └ paused : 애니메이션을 중지   

---

★ 추가

> cubic-bezier : cubic-bezier(n,n,n,n) 사용자 정의에 따라 그래프 4개의 구간을 변형가능

> animation-fill-mode : 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정

ㄴ none 아무것도 지정되지 않은 상태

ㄴ forwards 애니메이션이 키프레임의 100%에 도달했을 때 마지막 키프레이믈 유지

ㄴ backwards 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전에 미리 적용

ㄴ both forwards + backwards 둘다 적용

---

 <div id="main">
        <h1>css animation</h1>
        <p>animation-test</p>
        <div class="object"></div>
</div>

 

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

*{

    padding: 0;

    margin: 0;

    font-family: 'Montserrat', sans-serif;

}

#main{

    width: 100%;

    height: 800px;

    background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);

    overflow: hidden;

    color: #50468b;  

    position: relative;

    /* 부모기준 - 자식요소의 위치값을 위해 */

}

h1{

    position: absolute;

    top: 40%;

    left: 18%;

    font-size: 80px;

    animation-name: text1;

    /* 효과를 넣을 요소에 이름을 선언 */

    animation-duration: 1s;

    /* 효과를나타나는 시간 */

    animation-delay: 0.5s;

    /* 얼마 후에 시작할건지? */

    animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);

    /* cubic-bzier :원구의 곡선에 따라 4개의 컨트롤 포인트의 시간차이 _ 수치변형함수*/

    animation-fill-mode: both;

    /*

     애니메이션의 실행 전, 후에 요소의 스타일 적용방식

    - none 아무것도 지정되지 않음

    - forwards 100% 키프레임이 도달 > 마지막 유지

    - backwards 시작되기전에 미리 적용(스타일이 적용되기전)

    - both 둘다 적용 gorwards + backwards

    */

}

p{

    position: absolute;

    top: 53%;

    left: 28%;

    font-size: 30px;

    animation-name: text2;

    /* 효과를 넣을 요소에 이름을 선언 */

    animation-duration: 1s;

    animation-delay: 0.6s;

    animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);

    animation-fill-mode: both;

}

.object{

    width: 700px;

    height: 700px;

    border-radius: 50%;

    background: linear-gradient(135deg,#c3cfe2 0%,#9895b6 100%);

    position: absolute;

    right: 0;

    bottom: 0;

    transform: translateY(800px) scale(0.5);

    animation-name: obj;

    animation-duration: 1s;

    animation-delay: 0.6s;

    animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);

    animation-fill-mode: both;

}

@keyframes text1{

    0%{  opacity: 0; transform: translateY(0);  }

    /* 30# 50% 80% ... */

    100%{ opacity: 1; transform: translateY(-50px); }

}

@keyframes text2{

    0%{  opacity: 0; transform: translateY(0);  }

    100%{ opacity: 1; transform: translateY(-50px); }

}

@keyframes obj{

    0%{  opacity: 0; transform: translateY(800px) scale(0.5);  }

    100%{ opacity: 1; transform: translateY(280px) scale(1); }

}

index.html

0.00MB

style.css

0.00MB