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>

 

반응형