CSS로 그라디언트 애니메이션 작성

CSS로 그라디언트 애니메이션 작성

 

 

이미지 리소스 용량에 부담도 덜 주고 복잡하지 않고 이쁜 배경을 사용하기 위해서

그라디언트를 많이 사용하는데 여기에 애니메이션 효과를 더하면 정말 좋다.

 

.css-selector {     animation: AnimationName 30s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/*AnimationName = 에니메이션 이름 css-selector과 keyframes 의 이름이 동일해야 적용된다*/

코드를 작성 후 .css-selector 을 그라데이션애니메이션을

넣고 싶은 곳에 클래스를 .을 제외한 css-selector를 넣어주면된다.

혹시나해서 말하는데 클래스명도 자유롭게 사용하면된다.

 

 

 

이것을 쉽게 하기위한 사이트가 있는데

시간 속도나 색상등을 커스텀하게 조절하여 코드를 받아올수 있다.

 

 

https://www.gradient-animator.com/

CSS Gradient Animator