CSS3 Animation & keyframes (학습 35일차 TIL)

210727 오늘은 animation과 keyframes를 활용하여 시계와 물방울 효과를 구현해 보았다.
정규시간 이외에는 간단한 자바스크립트를 이용한 navigation 메뉴를 만들었다.

물방울이 커지면서 위로 올라간다.

CSS3 tips

• animation: name duration(0~100%까지 실행속도를 초단위로 설정) timing-function(linear,ease, and so on) delay(대기시간) iteration-count(반복횟수) direction(normal(0~100), alternate(0~100, 100~0), reverse(100~0)) fill-mode(animation이 시작되기 전, 후의 효과 forwards, backwards, both, none) play-state(animation의 실행 상태, paused) steps(10) animation 동작 지정;

animation: 이름 3s ease infinite(반복) alternate(번갈아서);

@keyframes animation이름 {
  0%(form) {
    left: 0;
    border: 20px solid red;
  }
  50% {
    top: 50px;
    border: 20px solid green;
  }
  100%(to) {
    left: 900px;
    border: 20px solid blue;
  }
}

• 50%라고 해서 딱 중간에 설정한 animation이 적용되지 않음.
• 속성 선택자를 잘 활용하자.
  ex) div[class^="bubble-"] class명이 bubble-로 시작되는 모든 div를 선택할 수 있다.