colmugx / syuanpi.css

✨A library of CSS animations.

Home Page:https://colmugx.github.io/syuanpi.css

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Syuanpi.css license

Syuanpi.css是一个比较轻便简单的CSS3动画库

安装

1.所有东西都已经在dist中。您可以:

  • Open in Desktop
  • Download ZIP
  • 打开terminal按照下列操作。
git clone https://github.com/ColMugX/Syuanpi.css.git

2.或者你喜欢直接用src的话,编译直接

npx gulp build

使用

按道理说跟animate.css是差不多的。不过讲一下基础用法

简单用法

  1. <head>之间引用
<head>
  <link rel="stylesheet" href="syuanpi.min.css">
</head>
<head>
  <link rel="stylesheet" href="syuanpi.css">
</head>
  1. class 标记以使用动画
<div class="syuanpi"></div>
  1. 动画是有多出两种模式的,一种是动画循环,您可以这么做:
<div class="syuanpi infinite"></div>

或者只是延长时间(375*2ms)

<div class="syuanpi long"></div>
  1. 支持让动画停留在最后一帧
<div class="syuanpi forwards"></div>
  1. 支持 5 档动画延迟播放(可以做队列动画)
<div class="syuanpi back-1"></div>
<div class="syuanpi back-2"></div>
<div class="syuanpi back-3"></div>
<div class="syuanpi back-4"></div>
<div class="syuanpi back-5"></div>

联系

{issue}

About

✨A library of CSS animations.

https://colmugx.github.io/syuanpi.css

License:MIT License


Languages

Language:CSS 81.0%Language:HTML 9.9%Language:JavaScript 9.1%