어떻게 애니메이션 CSS를 사용하여 몇 초 안에 놀라운 효과를 창조합니까? -3개 항목

5246 단어 webdevcssbeginnerstutorial
본문은 최초로 발표되었다https://www.blog.duomly.com/how-to-use-animate-css-tutorial-with-examples/
몇 년 전에 저는 모바일 응용 프로그램 프로젝트를 했는데 사용자 인터페이스가 매우 선진적이고 많은 운동과 점차적인 변화가 있습니다.그것은 모든 현대 모바일 애플리케이션과 마찬가지로 사용자에게 최상의 시각적 체험을 제공하기를 바란다.
CSS에서 모든 애니메이션을 만들고 디자이너의 지시에 따라 매끄럽고 아름답게 만드는 데 많은 시간을 들였습니다.그리고 나서, 나는 이 임무를 더욱 편안하게 하기 위해 해결 방안을 찾기 시작했고, 나에게 필요한 결과는 아무런 기쁨도 주지 않을 것이다.
내가 이렇게 애니마트를 찾았어.css 라이브러리, 처음부터 내가 필요로 하는 것으로 결정했습니다.나는 개인적으로 많은 전방 개발자들이 이 라이브러리를 매우 좋아한다. 왜냐하면 이것은 우리가 UI를 매우 훌륭하게 할 수 있기 때문이다.
오늘 나는 너희들에게 간단한 강좌를 하나 주고 너희들에게 어떻게 애니메이션을 사용하는지 가르쳐 주고 싶다.css 라이브러리는 이 부족한 자원에 뛰어들 수 있도록 도와줍니다.
또한 읽는 것보다 보는 것을 더 좋아한다면 저희 유튜브 채널에 가입하세요. 저희는 모든 강좌를 영상으로 발표합니다.
우리 시작합시다!

1. 애니메이션이란 무엇인가.css 라이브러리?



이 도서관의 한 창작자가 사이트에 쓴 것처럼, 그것은 '물 CSS 애니메이션만 추가하면 된다.' 이다.라이브러리를 사용하는 것은 매우 간단합니다. 라이브러리는 CSS 파일로 다운로드하여 프로젝트에 추가할 수 있으며, 요소에 클래스를 추가하여 많은 미리 정의된 애니메이션 중 하나를 사용할 수 있습니다.
효과의 지연 및 속도를 설정하여 선택한 애니메이션을 사용자화할 수 있습니다.애니메이션은 일반 HTML 및 CSS 항목에서 사용할 수 있지만 Javascript도 사용할 수 있습니다.

2. 설치


애니메이션을 시작할 수 있는 두 가지 방법이 있다.css 라이브러리npm 또는 Thread를 사용하는 경우 다음 명령 중 하나를 사용하여 설치할 수 있습니다.$ npm install animate.css --save또는$ yarn add animate.css하지만 하나도 사용하지 않았다면 축소판 하나만 다운로드하면 된다.css 파일을 가져오거나 CDN을 가져와 다음 코드와 같이 마스터 파일의 헤드에 로드합니다.
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>
또는 CDN을 사용합니다.
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
아주 간단한 설치 외에 애니메이션.css는 파일 하나만 포함하기 때문에 불러오는 시간에 큰 영향을 주지 않으며, 페이지의 성능은 여전히 안전합니다.

3. 페이지의 요소에 어떻게 애니메이션을 추가합니까?


이제 사용 가능한 애니메이션을 페이지의 요소에 추가하는 방법을 한 걸음 한 걸음 설명하고 싶습니다. 
만약 페이지에 h1 요소가 있고 반사 애니메이션을 추가하려고 한다면.모든 원소에 animated류를 추가해야 하는데 무한하기를 원한다면 당연히 infinite류를 추가해야 한다.
다음에 다른 종류의 애니메이션 형식으로 선택해야 합니다. 우리의 예는 bounce 입니다.다음 예를 살펴보겠습니다.
봐라!그것은 정말 쓰기 좋다.추가 매개변수를 설정하고 수동으로 스타일을 설정하거나 다음 표에 따라 다른 클래스를 추가할 수도 있습니다.

표 - 지연 시간

표 - 속도 시간
또는 CSS의 다른 애니메이션처럼 수동으로 스타일을 설정할 수 있습니다. 다음 예를 참조하십시오.
h1 {
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 5;
}
이제 그것을 어떻게 사용하는지 더 잘 알 때 애니메이션이 주는 애니메이션의 다양한 사용법을 알아보자.CSS 라이브러리의 세 가지 다른 예.

4. 애니메이션 로드


모든 면에 사용자를 끌어들이고 데이터를 기다리는 마운트가 필요합니다.화나게 하다.css는 모든 레이아웃에 예쁜 애니메이션을 만들 수 있습니다.한번 해보자!
나는 세 개의 끼워 넣은 요소에 flip 애니메이션을 사용하기로 결정했다.가장 안쪽에 있는 두 요소는 지연되므로 이러한 요소의 애니메이션이 1초 또는 2초 후에 시작됩니다.각 컴포넌트의 속도는 테이블에 따라 3초를 의미하는 slower로 설정됩니다.

5. 탐색


거의 모든 페이지가 내비게이션을 필요로 하는데 그 중 일부 페이지는 전형적인 수평 내비게이션을 가지고 있지만 지금은 전환 메뉴를 사용하는 것이 매우 흔하다.그것은 현대적이고 응답이 빠르며 사용자가 우호적이다. 물론 고객이 당신의 사이트를 기억하도록 도와줄 것이다.
다음은 애니메이션을 사용하는 예입니다.순수 Javascript 전환 메뉴의 css 효과.

6.표


본문에서 제가 보여드리고 싶은 마지막 항목은 애니메이션을 사용하는 것입니다.css 라이브러리는 간단한 검증을 갖춘 폼입니다.
입력 요소에 진동 효과를 추가하고 싶은데 필드가 필요하지만 채워지지 않았습니다.
다음은 실현이다.

결론


위의 몇 가지 예에서 보듯이 애니메이션은 사용자 인터페이스에 많은 생명과 아름다움을 가져다 줄 수 있다.
진동장보다 이 진동장이 무시된 진동장이라는 것을 더 잘 나타낼 수 있기 때문에 사용자로 하여금 더욱 잘 체험하게 할 수 있다.
CSS에서 처음부터 예쁜 고급 애니메이션을 만들 수 있습니다. 이전 articles 에서 애니메이션의 간단한 메모지를 볼 수 있지만, Animate와 같은 전용 라이브러리를 사용하면 더욱 쉽고 편안합니다.css.특히 그것은 너무 작아서 사이트의 성능에 영향을 주지 않는다.
애니메이션을 사용하려면 댓글에 알려 주십시오.css 또는 다른 라이브러리에서 레이아웃에 예쁜 애니메이션을 만듭니다.그렇다면, 당신의 의견을 공유하세요.만약 없다면, 아마도 시험해 볼 때가 되었을 것이다.
읽어주셔서 감사합니다.
둠리에서 온 안나
[HTML/CSS] 박스 모델 (box-model)
CF-13C. Sequence(DP)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage