动画.css

Just-add-water (s) CSS动画. 萨斯港 动画. css

animate.scss 是一个很酷的,有趣的, 和交叉浏览的动画, 供您用于您的项目。 对强调,主页,滑板, 和一般的刚加-水-真棒.

安装

通过 npm 安装 :

$ npm i @brightleaf/animate.scss

线条 :

$ yarn add @brightleaf/animate.scss

使用量

要在您的网站上使用 animate.scs, 您可以使用 1) 只需将编译的样式表降入您的文档 <head>,或者您可以直接将 sass 文件导入您的项目。 从那里可以加课 animated 与任何动画名称一起。 就这样! 你有CSS动画元素. 超级棒!

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

如果你直接输入sass,你有两种选择. 您可以通过导入来将软件包整体拉入, 包括所有动画 animate.scss 从软件包根 :

@import "~@brightleaf/animate.scss/animate";

...或者你可以拉动动画(或动画组),因为你需要它们。 使用此选项, 您还需要导入 settings 财务报告和审定财务报表 classes 独立文件 :

@import "~@brightleaf/animate.scss/source/settings"; // settings first!
@import "~@brightleaf/animate.scss/source/flippers"; // animation group!
@import "~@brightleaf/animate.scss/source/lightspeed/lightSpeedIn"; // individual animation!
@import "~@brightleaf/animate.scss/source/classes"; // classes!

动画

动画元素, 添加类 animated 到一个元素。 包括班级 infinite 为无限循环。 最后,您需要在元素中添加以下一个类别:

完整实例 :

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

可以更改动画的长度,添加延迟或更改其播放次数:

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

用 j 查询

你可以做一堆其他的东西 与动能。 与 jQuery 组合时会按下 。 一个简单的例子:

$("#yourElement").addClass("animated bounceOutLeft");

您也可以在动画结束时检测:

// See https://github.com/daneden/animate.scss/issues/644
var animationEnd = (function(el) {
  var animations = {
    animation: "animationend",
    OAnimation: "oAnimationEnd",
    MozAnimation: "mozAnimationEnd",
    WebkitAnimation: "webkitAnimationEnd"
  };

  for (var t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
})(document.createElement("div"));

$("#yourElement").one(animationEnd, doSomething);

查看视频教程 如何使用 animate.css 与 jQuery 在这里.

说明: jQuery.one() 用于最多执行事件处理器时 一次更多信息 这里。 。 。 .

可以扩展jQuery并添加一个功能,为您做这一切:

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: "animationend",
        OAnimation: "oAnimationEnd",
        MozAnimation: "mozAnimationEnd",
        WebkitAnimation: "webkitAnimationEnd"
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement("div"));

    this.addClass("animated " + animationName).one(animationEnd, function() {
      $(this).removeClass("animated " + animationName);

      if (typeof callback === "function") callback();
    });

    return this;
  }
});

像这样使用它:

$("#yourElement").animateCss("bounce");
or;
$("#yourElement").animateCss("bounce", function() {
  // Do something after animation
});

设置 延迟 财务报告和审定财务报表 速度

延迟类

可以直接在元素的类属性上添加延迟,就像这样:

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

这些类名是由 $animate-scss-second-delays 列表变量。 您可以覆盖此变量, 为您自己的需要创建类 :

$animate-scss-second-delays: 1, 2, 3, 4, 5, 6, 7; // go on to your heart's content!

速度类

这些类名是由 $animate-scss-durations 地图变量。 可以通过增加这些类来控制动画的速度,作为下面的样本:

<div class="animated bounce faster">Example</div>

您可以创建自己的地图, 甚至添加自定义速度, 从而覆盖这些值 :

$animate-scss-durations: (
  fast: 800ms,
  faster: 500ms,
  fassssssssssst: 200ms,
  // custom speed!
    slow: 2s,
  slower: 3s
);

说明编号: animated 类的默认速度为 1s如果您需要自定义持续时间,请为 $animate-scss-default-duration 变量.

无障碍

动画. scs支持 prefers-reduced-motion 媒体查询 这样具有运动敏感性的用户就可以选择退出动画. 在被支持的平台上(目前只有OSX Safari和iOS Safari),用户可以在他们的操作系统偏好上选择"减少运动",它将为他们关闭CSS的过渡而无需做任何进一步的工作.

许可证

Animate.css根据麻省理工学院的许可证获得许可证。 (http://opensource.org/licenses/MIT 互联网档案馆的存檔,存档日期2013-12-02(中文(简体) )

捐款

拉请求是这里的路。 我们只有两条规则可以提交拉动请求:匹配命名惯例(骆驼Case,分类[花样,回弹等]),让我们看到一个提交动画的演示 笔该 最后一个很重要。 。 。 .