CSS - Animation

mm0467·2020년 11월 17일
0

CSS

목록 보기
2/2
post-thumbnail

구현하는 기능과 배우는 컨셉

animation-duration
✅ ** animation-name**
animation-iteration-coun
animation-delay
animation-timing-function
animation-fill-mode
@keyframes


👉 animaton


  <body>
    <!-- 마우스를 올리면 div요소의 width가 300px로 늘어나는 
    과정이 3초동안 보이도록 작성하세요. transition을 이용하여 구현합니다.-->
    <div></div>
    <li>
      <img src="http://placehold.it/400x200" alt="" />
      <span>image title</span>
    </li>
  </body>
</html>

<CSS>
div {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: change_color;
  animation-duration: 2s;
  animation-iteration-count: 3; /* 반복횟수 */
  animation-delay: 0.1s; /* 몇초후시작할건지 */
  animation-timing-function: ease-in;
  animation-fill-mode: forwards; /* 진행방향 끝에 머무르도록함 */
}
@keyframes change_color {
  from {
    background: red;
  }
  to {
    background: blue;
  }
}

**
◾ Animation-name: change_color; (animation 이름설정)
◾ Animation-duration: 2s; (animation 지속시간설정)
◾ Animation-iteration-count: 3; (animation 반복횟수설정)
◾ Animation-delay: 0.1s (animation 몇초후에 시작할지설정)
◾ Animation-fill-mode: forwards; (진행방향 설정)
◾ @keyframes change_color (keyframes animation이름)
◾ keyframes : animation 전체적인 동작흐름설정**

profile
Front-end Developer

0개의 댓글