[ CSS ] @keyframes 애니메이션 효과

<div id="m">
</div>

#m{
  width:100px;
  height:100px;
  background:blue;
  position: relative;
  animation: example1 5s infinite;
}
@keyframes example1{
	from {top:0px;}
    50%{left:100px;top:100px;}
    to{top:300px;left:300px;}
}

 

 

 

[ 참고 ]

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes_important

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes