Tuesday 动画效果的小巧的CSS3动画库

PetitQ 表单/表格 2019-1-24 1.94K 0 0

Tuesday 是一款带 22 种效果的小巧的 CSS3 动画库。目前网络上已经有多种好用的 CSS 动画库插件，这款 CSS3 动画库的特点是动画路径短，动画持续时间也较短。目前该动画库提供了 22 种不同的元素进入和离开的动画效果。

使用方法

该动画库的使用方法非常简单，在页面的头部引入 tuesday.min.css 文件。

也想出现在这里？联系我们吧

<link rel="stylesheet" type="text/css" href="css/tuesday.min.css" />

或者你也可以使用 CDN 加速地址：

<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/ShakrMedia/tuesday/master/build/tuesday.min.css" />

HTML 结构

在你需要执行动画的元素上添加.animated class 以及你想要执行动画的 class 名称。

<h1 id="header-text" class="animated tdDropInLeft">It's Tuesday.</h1>

通过 LESS 使用

你可以在下载的文件包中找到 tuesday.less 文件，把它引入到你的 LESS 样式文件中。

```
@import 'tuesday.less';
```

将动画的 class 作为 mixins 放置到你需要的元素上：

```
h1#header-text {
```
```
    .animated;
```
```
    .tdDropInLeft;
```
```
}
```

自定义动画

由于所用元素的动画都会在 DOM 元素被加载之后才会开始（或使用 display: block 使其可见），因此，如果你想要控制动画的开始时间，可以通过 JavaScript 来动态的为元素添加相应的 class。如果你只是简单的想在延迟某段时间之后开始元素动画，可以简单的为元素添加 animation-delay: (n)s 属性。同样，如果你想调整元素的动画持续时间，也可以为元素添加 animation-duration: (n)s 属性。