Animate.css는 몇 년 전부터 지금까지 파티에 늦었다는 것을 인정해야합니다. 몇 달 전만해도 CSS 애니메이션 튜토리얼을 검색하면서 Animate.css를 가장 빠르고 간단하게 애니메이션화 할 수있는 방법을 찾았습니다.
Dan Eden이라는 사람이 만든 Animate.css는 CCS의 작동 방식을 확인하고 웹 사이트에서 애니메이션 작업을 수행하는 빠른 방법입니다.
'Just-add water CSS animation'으로 묘사 Animate.css는 진지한 측면에서 약간의 재미입니다. 그것은 나 같은 아마추어 웹 디자이너조차도 CSS 애니메이션의 기본 사항을 빠르게 파악하고 웹 사이트에 간단하지만 효과적인 효과를 만들 수 있습니다. 하나의 애니메이션 헤드 라인에서보다 관련있는 동작에 이르기까지이 도구를 사용하면됩니다.
Animate.css
Animate.css는 GitHub에서 다운로드 할 수 있으며 기본적으로 한 곳에서 수집 된 간단한 CSS 효과 라이브러리입니다. 각 애니메이션은 잘 꾸며져 있으며 바로 사용할 수 있습니다. 원하는 애니메이션을 찾아 수업을 적용하기 만하면됩니다. 그게 전부입니다.
2, 500 줄의 코드가 포함되어 있지 않으려면 전체 라이브러리를 다운로드하지 않아도됩니다. Animate.css 사이트를 방문하여 애니메이션을 찾은 다음 Animate.css 다운로드 링크를 클릭하십시오. 클래스를 웹 페이지에로드하여 원하는대로 복사하고 사용할 수 있습니다.
그래도 GitHub를 사용하고 드릴 다운하여 원하는 효과를 찾는 것이 더 쉽습니다.
- css GitHub 페이지로 이동하십시오.
- 소스 링크를 클릭하여 요소 목록에 액세스하십시오.
- 목록에서 원하는 효과 유형을 선택하십시오. 바운스는주의를 찾는 사람이므로주의를 기울이는 사람 링크를 선택하십시오.
- bounce.css를 선택하십시오.
- 코드를 복사하여 페이지에 배치하여 애니메이션을 적용하십시오.
정말 간단합니다. 다른 효과에 대해 다른 옵션을 분명히 선택하지만 최종 결과는 동일합니다. 페이지에서 무거운 물건을 들어 올리는 데 필요한 코드에 액세스하십시오.
Animate.css로 애니메이션 객체 만들기
Animate.css로 멋진 것을 만드는 것은 간단합니다. CCS 코드를 찾아서 자신의 CSS에 추가하기 만하면됩니다. 내가 할 수 있다면 누구나 할 수 있습니다!
Animate.css 페이지의 첫 번째 옵션은 바운스이므로이 예제에서 사용하겠습니다.
- 붙여 넣기 ' '내부 스타일 시트에
- 원하는 애니메이션의 CSS를 찾아서 애니메이션하려는 요소에 추가하십시오. 예를 들어 ' '바운스 효과를 테스트, 이미지 등으로 추가합니다.
- 다음 CSS 코드를 추가하여 모두 작동 시키십시오. 위의 bounce.css에서 가져온 것입니다.
@keyframes 바운스 {
20 %, 53 %, 80 %에서 {
애니메이션 타이밍 기능 : 큐빅 베 지어 (0.215, 0.610, 0.355, 1.000);
변환 : translate3d (0, 0, 0);
}
40 %, 43 % {
애니메이션 타이밍 기능 : 큐빅 베 지어 (0.755, 0.050, 0.855, 0.060);
변환 : translate3d (0, -30px, 0);
}
70 % {
애니메이션 타이밍 기능 : 큐빅 베 지어 (0.755, 0.050, 0.855, 0.060);
변환 : translate3d (0, -15px, 0);
}
90 % {
변환 : translate3d (0, -4px, 0);
}
}
.bounce {
애니메이션 이름 : 바운스;
변형 기원 : 중앙 바닥;
}
Animate.css로 애니메이션을 더욱 발전 시키십시오
위의 순서는 페이지가 처음로드 될 때 바운스 효과를 추가합니다. 우리는 그것을 호버에 추가하는 것은 어떻습니까. 그렇게하면 누군가가 테스트 위로 마우스를 가져갈 때마다 바운스됩니다. 프로덕션 웹 사이트에서 수행 할 작업은 아니지만 모든 것이 어떻게 작동하는지 보여줄 수있는 좋은 방법입니다.
풍선에 바운스 효과를 추가하려면 CSS에 다음 코드를 추가하십시오. 마우스가 요소 위로 마우스를 가져갈 때마다 바운스되어야합니다.
.animated : 호버 {
-웹킷 애니메이션 지속 시간 : 1;
-moz- 애니메이션-지속 시간 : 1s;
-ms- 애니메이션-지속 시간 : 1s;
-o- 애니메이션-지속 시간 : 1s;
애니메이션 지속 시간 : 1;
-웹킷 애니메이션 채우기 모드 : 둘 다;
-moz-animation-fill-mode : 둘 다;
-ms- 애니메이션 채우기 모드 : 둘 다;
-o- 애니메이션 채우기 모드 : 둘 다;
애니메이션 채우기 모드 : 둘 다;
}
CSS를 알고 있다면 다른 동작에 다른 효과를 구현하는 방법에 대해 나보다 훨씬 더 잘 알 것입니다. 초보자로서 Animate.css에서 제공되는이 라이브러리와 라이브러리는 웹 페이지를위한 기본적이지만 효과적인 애니메이션을 만드는 데 도움이됩니다.
라이브 웹 사이트에서 얼마나 많이 사용하는지는 잘 모르겠습니다. 항상 다운되지 않고 모바일 사용자는 전혀 좋아하지 않는 것 같습니다. 그러나 CSS의 작동 방식과 웹을 향상시키는 데 CSS를 사용하는 방법에 대한 교훈으로 훌륭한 리소스입니다. 저는 초보자 일뿐입니다.이 자습서에서 Animate.css를 사용하여 몇 시간을 보내더라도 많은 교훈을 얻었습니다. 나는 끝내기 전에 더 많이 가지고 놀 것 같습니다. 당신 은요?
