CSS 애니메이션 효과(버튼, 배경이미지 등) 만들어 주는 사이트

animista.net/play/background/ken-burns

Animista

 

이런 형식..

<style>
/* ----------------------------------------------
 * Generated by Animista on 2021-2-3 18:45:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.color-change-2x {
	-webkit-animation: color-change-2x 2s linear infinite alternate both;
	        animation: color-change-2x 2s linear infinite alternate both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-3 18:56:29
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-2x
 * ----------------------------------------
 */
@-webkit-keyframes color-change-2x {
  0% {
    background: #19dcea;
  }
  100% {
    background: #b22cff;
  }
}
@keyframes color-change-2x {
  0% {
    background: #19dcea;
  }
  100% {
    background: #b22cff;
  }
}

 </style>
 <div class="anim-object active" id="box-object-2" style="animation: 2s linear 0s infinite alternate both running color-change-2x;"><div class="text">Animista</div></div>