로메오의 블로그

css 애니메이션 본문

Design/Markup

css 애니메이션

romeoh 2022. 4. 20. 09:30
반응형

Transition

<div></div>

<style>
div {left: 0px; transition: left .3s;}
div.start {left: 100px}
</style>

 

Keyframe

<div></div>

<style>
div {
  animation-name: start; 
  animation-duration: 1s; 
  animation-iteration-count: infinite;
}
@keyframs start {
  0% {background: #E0FAF7;}
  100% {background: #fae8e0;}
}
</style>

 

반응형

'Design > Markup' 카테고리의 다른 글

Figma에서 Material Design Icon 사용하기  (0) 2022.05.11
css backdrop-filter  (0) 2022.04.28
checkbox 이미지 처리  (0) 2022.04.14
CSS flex  (0) 2022.03.30
CSS 가상요소(before)에 svg로 만든 font넣기  (0) 2022.03.30
Comments