CSS3와 애니메이션 -트랜지션

트랜지션 

웹 요소의 배경색이 바뀌거나 도형의 테두리가 원형으로 바뀌는것처럼 스타일의 속성이 바뀌는것

 

transition-property 트랜지션 대상 설정

transition-property:all; /*해당 요소의 모든속성에 적용 기본값
transition-property:background-color;
transition-property:width,height;

 

tranisition-duration  트랜지션 진행시간 설정

<style>
   transition-property: width, height;
   transition-duration: 2s, 1s;  /* width height 에 각각 초 부여*/
</style>

 

tranistion-timin-function 트랜지션 속도 곡선 설정

linear:시작~끝 같은속도  

ease:기본값, 천천히->빨라짐->천천히

ease-in:시작을 느리게

ease-out:느리게 끝냄

eas-in-out: 느리게시작 느릭 끝냄

cubic-bezier(n,n,n,n) 직접정의 n:0~1 

transition-timing-function: linear;

 

transition-delay    트랜지션 지연시간 설정

transition 위의 속성들 한꺼번에 설정

property-duration-function-delay 순서대로, 표기하지않을 시 기본값

transition: 2s ease-in; /* property:all(기본값) duration :2s, function; eas-in ,delay:0*/

 

 

애니메이션

시작~끝나는동안 원하는곳 어디서든 스타일을 바꿀 수 있음

 

키프레임: 애니메이션 중간에 스타일이 바뀌는 지점

@keyframes

시작위치 0% 끝위치 100%(from  to)   중간위치 50%

<style>
@keyframes change-bg {  /*change-bg를 animation-name에 적용가능*/
  from {                      /*애니메이션 시작*/
    background-color: blue;
    border: 1px solid black;
  }
  to {                        /*애니메이션 끝 */
    background-color: #a5d6ff;
    border:1px solid blue;
    border-radius: 50%;
   }
}
</style>

animation-name 여러개의 keyframe 사용시 이름으로 구분

animation-duration 애니메이션 실행시간

<style>
#box1 {
   animation-name: shape;
   animation-duration: 3s;
}
#box2 {
   animation-name: rotate;
   animation-duration: 3s;
}
@keyframes shape {
   from { border: 1px solid black; }
   to {
     border: 1px solid black;
     border-radius: 50%;
    }
}
@keyframes rotate {
    from {transform:rotate(0deg);}
    to  {transform: rotate(45deg);}
}
</style>

 

animation-direction 애니메이션이 끝난후의 설정

:alternate  반대방향으로 애니메이션을 한번 더 실행

 

animation-iteration-count 반복횟수 : 숫자| infinite(무한반복)

 

animation-timing-function 애니메이션 속도 곡선 (값은 transition-timint-function 참고)

 

animation 속성 한번에 표시 (duration은 반드시지정,기본값0이 적용되면 애니메이션 효과 X)

name -> duration -> timing-function -> direction -> literation-count 순서