Coding/HTML & CSS

[HTML & CSS] 움직이는 Animation 효과 넣기 !

포스트it 2021. 4. 15. 13:25
728x90
반응형

- code -

<!DOCTYPE html>
<html>
<head>
<style> 
.box {
  width: 100px;
  height: 100px;
  background-color: wheat;
  position: relative;
  animation-name: example;
  animation: example 4s linear infinite alternate;
}

@keyframes example {
  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;}
}
</style>
</head>
<body>

<div class='box'></div>

</body>
</html>

 

결과값

 

728x90
반응형