animation 애니메이션 css

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation5

---

animation-fill-mode: forwards;

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_fill-mode

---

 

animation-fill-mode: both;

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_fill-mode3

---

처음으로 가서 멈춤 

animation-fill-mode: backwards;

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_fill-mode2

---

animation-direction: alternate;

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_direction2