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>
반응형