반응형
 

This is Animation

 

 

 

 

 

애니메이션을 이용하여 다양한 변화를 줄 수 있다.

 

jquery, javascript를 이용하여 스크롤을 내릴 때, 상단 부분이 hide되는 과정에서

바로 사라지면 어색하니 fade out형태를 만들어주거나,

footer가 천천히 나타나게 하려면 animation을 쓸 수 있다.

다양한 속성이 존재하니 animation을 간단히 써보고 어떻게 쓰는지만 파악한 후 적재적소에 사용해보자.

 

<!DOCTYPE html>
<html>
<head>
<style> 
#mydiv {
  width: 100px;
  height: 100px;
  background: #85E3FF;
  position: relative;
  -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
  animation: myfirst 5s 2;
  animation-direction: alternate;
}
#mydiv2 {
  width: 100px;
  height: 100px;
  background: #85E3FF;
  position: relative;
  -webkit-animation: myfirst2 5s 2; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
  animation: myfirst2 5s 2;
  animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
  0%   {background: #85E3FF; left: 0px; top: 0px;}
  25%  {background: #AFCBFF; left: 200px; top: 0px;}
  50%  {background: #FCC2FF; left: 400px; top: 200px;}
  75%  {background: #FFF5BA ; left: 0px; top: 400px;}
  100% {background: #FFCBC1; left: 0px; top: 0px;}
}

@keyframes myfirst {
  0%   {background: #85E3FF; left: 0px; top: 0px;}
  25%  {background: #AFCBFF; left: 200px; top: 0px;}
  50%  {background: #FCC2FF; left: 400px; top: 200px;}
  75%  {background: #FFF5BA ; left: 0px; top: 400px;}
  100% {background: #FFCBC1; left: 0px; top: 0px;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst2 {
  0%   {background: #85E3FF; left: 0px; top: 0px;}
  25%  {background: #AFCBFF; left: 0px; top: 200px;}
  50%  {background: #FCC2FF; left: 200px; top: 100px;}
  75%  {background: #FFF5BA ; left: -100px; top: 300px;}
  100% {background: #FFCBC1; left: 0px; top: 0px;}
}

@keyframes myfirst2 {
  0%   {background: #85E3FF; left: 0px; top: 0px;}
  25%  {background: #AFCBFF; left: 0px; top: 200px;}
  50%  {background: #FCC2FF; left: 200px; top: 100px;}
  75%  {background: #FFF5BA ; left: -100px; top: 300px;}
  100% {background: #FFCBC1; left: 0px; top: 0px;}
}
</style>
</head>
<body>
	<div id="mydiv"></div>
	<h1>This is Animation</h1>
	<div id="mydiv2"></div>
</body>
</html>

 

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction

 

Tryit Editor v3.6

div { width: 100px; height: 100px; background: red; position: relative; -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */ -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */ animation: myfirst 5s 2; animation-direction: alternate; } /* Saf

www.w3schools.com

 

 

 

 

반응형
저작자표시 비영리 동일조건

'Basic > HTML & CSS' 카테고리의 다른 글

CSS with INTERTWINED(네온 웨이브)  (0) 2019.10.03
CSS를 이용한 scattering hexagons  (0) 2019.09.29
Gradation css를 이용한 배경 애니메이션  (0) 2019.09.15
그라데이션 색감 참고하기 좋은 사이트  (0) 2019.06.29
순수 CSS로만 이루어진 hover시 Animation Button  (0) 2019.06.29

티스토리툴바