×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,101,837명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형

 

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

 

 

 

 

반응형