css13

css트랜지션과 애니메이션

1. 트랜지션

  • 1트랜지션
    웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌어가는 것
  • 2transition-property
    트랜지션을 어디에 적용할 지 지정
    all / background-color / width,height
  • 3transition-duration
    트랜지션 진행 시간 지정
    시간 단위: 초, 밀리초
  • 4transition-timing-function
    트랜지션의 속도 지정
    ease 처음에 빨라지다가 마지막에 천천히(기본값)
    ease-in 시작 느리게
    ease-out 느리게 끝남
  • 5transiton-delay
    그 시간 만큼 기다렸다가 실행
    기본값 0

애니메이션

  • 1css와 애니메이션
    이전 버전 고려: -webkit-, -moz- 접두사를 붙여야 한다.
    최신 버전: 없이 사용 가능
  • 2@keyframes
    애니메이션의 상표(이름), 상태를 지정
    시작 0%(from) 끝위치100%(to)
  • 3animation-name 
    @keyframes에서 만든 애니메이션 이름 사용
  • 4animation-duration
    애니메이션 실행 시간 설정, 초, 밀리초 단위 기본값 0
  • 5animation-direction
    애니메이션 끝난 후 원래 위치로 돌아가거나 반대 방향으로 애니메이션 실행하도록 지정
    normal: 애니메이션 끝까지 실행하면 원래 있던 위치로 돌아감(기본값)
    alternate: 애니메이션 끝까지 실행하면 왔던 방향으로 되돌아가면서 실행
  • 6animation-iteration-count
    애니메이션 반복 횟수 지정
    <숫자>: 숫자에 입력된 횟수  infinite: 무한 반복
  • 7animation-timing-function
    애니메이션 속도 곡선 지정
  • 8animation 속성
    하나의 속성으로 줄여서 사용
    animation-duration 속성값은 반드시 지정해야 함