文档翻译---1、Animate.css

文档翻译---1、Animate.css

一、总结

一句话总结：

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

1、animate.css v4 is in the work with lots of improvements and some breaking changes, including CSS custom properties support (aka CSS variables) and classes prefix for a safer use. ？

some breaking changes
CSS custom properties support
aka CSS variables
classes prefix

animate.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。

2、You can follow the development on the dev branch and give your feedback on the issue tracker. Every feedback is welcome!？

follow the development
on the dev branch
on the issue tracker

您可以在dev分支上关注开发，并在问题跟踪器上提供反馈。 欢迎任何反馈！

3、Just-add-water CSS animation？

随便添加CSS动画

4、Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.？

非常适合强调，主页，滑块和一般的加水效果。

5、awesomeness？

敬畏
Sales is just telling people about the awesomeness of your product/service.

销售就是告诉人们你的产品或者服务的价值所在。
Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

6、You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. ？

do a whole bunch of other stuff
英 /bʌntʃ/  n. 群；串；突出物 bunch

将animate.css与Javascript结合使用时，您可以使用animate.css进行大量其他工作。

7、Notice that the examples are using ES6's const declaration, dropping support for IE10 and some aging browsers. ？

using ES6's const declaration
dropping support for IE10
some aging browsers

请注意，这些示例使用的是ES6的const声明，不再支持IE10和某些老化的浏览器。

8、If you prefer, switch the const to var declarations and IE10 and some old browsers will get support (they still have to provide classList support, so do your research).？

If you prefer
switch the const to var declarations
so do your research

如果愿意，可以将const转换为var声明，然后将IE10转换为IE10，一些旧的浏览器将获得支持（它们仍必须提供classList支持，因此您需要进行研究）。

9、Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. ？

so that users with motion sensitivity
can opt out of animations
英 /ɒpt/ vi. 选择 opt out of

Animate.css支持“偏好减少运动”媒体查询，以便具有运动敏感性的用户可以选择退出动画。

二、Animate.css文档翻译

来源：https://github.com/daneden/animate.css/

We need your help! animate.css v4 is in the work with lots of improvements and some breaking changes, including CSS custom properties support (aka CSS variables) and classes prefix for a safer use. We need your feedback! You can follow the development on the dev branch and give your feedback on the issue tracker. Every feedback is welcome!

我们需要你的帮助！ animate.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。 我们需要您的反馈！ 您可以在dev分支上关注开发，并在问题跟踪器上提供反馈。 欢迎任何反馈！

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Installation

Install via npm:

$ npm install animate.css --save

or yarn:

$ yarn add animate.css

Usage

To use animate.css in your website, simply drop the stylesheet into your document's <head>, and add the class animated to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

or use a CDN hosted version by CDNJS

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

Animations

To animate an element, add the class animated to an element. You can include the class infinite for an infinite loop. Finally you need to add one of the following classes to the element:

Class Name   
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat      

Full example:

<h1 class="animated infinite bounce delay-2s">Example</h1>

Check out all the animations here!

It's possible to change the duration of your animations, add a delay or change the number of times that it plays:

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Usage with Javascript

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

You can also detect when an animation ends:

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

You can use this simple function to add and remove the animations:

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

And use it like this:

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
  // Do something after animation
})

Notice that the examples are using ES6's const declaration, dropping support for IE10 and some aging browsers. If you prefer, switch the const to var declarations and IE10 and some old browsers will get support (they still have to provide classList support, so do your research).

Setting Delay and Speed

Delay Class

It's possible to add delays directly on the element's class attribute, just like this:

<div class="animated bounce delay-2s">Example</div>
Class NameDelay Time
delay-1s 1s
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s

Note: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code.

Slow, Slower, Fast, and Faster Class

It's possible to control the speed of the animation by adding these classes, as a sample below:

<div class="animated bounce faster">Example</div>
Class NameSpeed Time
slow 2s
slower 3s
fast 800ms
faster 500ms

Note: The animated class has a default speed of 1s. If you need custom duration, add it directly to your own CSS code.

Custom Builds

Animate.css is powered by gulp.js, which means you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:

$ cd path/to/animate.css/
$ npm install

Next, run npx gulp to compile your custom builds. For example, if you want only some of the “attention seekers”, simply edit the animate-config.json file to select only the animations you want to use.

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "headShake": true,
  "swing": true,
  "tada": true,
  "wobble": true,
  "jello":true
}

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

License

Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to callmeelton@gmail.com.

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Renyi-Fan/p/12203535.html