CSS3 애니메이션 애니메이션 특수 효과 플러그인의 영리한 사용 소개-CSS 튜토리얼-php.cn

CSS3 애니메이션 애니메이션 특수 효과 플러그인의 영리한 사용 소개

高洛峰

풀어 주다： 2017-03-17 10:25:53

원래의

1818명이 탐색했습니다.

animate.css 파일을 다운로드하세요. 파일에 코드가 많지만, 특수 효과 중 한두 개만 사용하는 경우에는 선택적으로 사용할 수 있는 CSS 스타일이라는 점을 이해해야 합니다. 복사하세요.

첫 번째는 공개 스타일입니다.

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

로그인 후 복사

.animated定义了动画的持续时间；

로그인 후 복사

.animated.infinite定义了循环动画，如果只要求播放一次就不需要添加该样式
下面是每个特效的样式，举几个例子：

로그인 후 복사

바운스 효과 경계

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

로그인 후 복사

는 html 페이지에서 사용할 수 있습니다. 텍스트로 사용할 수 있으며, 그림 등의 요소를 사용하면 다음 효과는 계속 뛰는 그림

<img src="returnTop.png" class="animated infinite bounce">

로그인 후 복사

플래시 특수효과 플래시

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

로그인 후 복사

스윙 특수 효과 스윙

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

로그인 후 복사

많은 애니메이션 특수 효과가 있으며 animate.css 웹사이트에서 볼 수 있습니다. 각 특수 효과의 이름은 스타일 정의의 클래스 이름, 즉 애니메이션 프레임 이름이 일대일로 대응될 수 있습니다. 이 웹사이트에서 최신 버전의 animate.css 파일을 다운로드할 수도 있습니다.

알림: 애니메이션은 CSS3의 기능이며 최신 주류 브라우저를 지원합니다. 위 플러그인은 -webkit 커널을 지원하는 브라우저입니다. 다른 최신 브라우저를 지원하려면 해당 플러그인을 추가하세요. 공급업체가 접두사로 붙은 애니메이션 프레임을 직접 찾아보세요.

위 내용은 CSS3 애니메이션 애니메이션 특수 효과 플러그인의 영리한 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!