如何设置动画

2022-04-30

fungo 推荐使用animista作为动画库

使用 tail-animista

  • 配置tailwindcss

    若未配置，参考how-to-set-style

  • 复制样式

    打开https://tail-animista.vercel.app/ ,获取你需要的样式

  • 修改配置

    修改 tailwind.config.js

     1module.exports = {
 2	theme: {
 3		extend: {
 4			animation: {
 5				"fade-in": "fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000)   both",
 6			},
 7			keyframes: {
 8				"fade-in": {
 9					"0%": {
10						opacity: "0",
11					},
12					to: {
13						opacity: "1",
14					},
15				},
16			},
17		},
18	},
19};

  • 使用动画

    当配置fade-in后，可在template使用animate-fade-in调用动画

使用 animista.net

  • 复制样式

    打开https://animista.net/ ,获取你需要的样式

  • 新建文件

    vim animate.css

     1.fade-in {
 2	-webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
 3	animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
 4}
 5@-webkit-keyframes fade-in {
 6	0% {
 7		opacity: 0;
 8	}
 9	100% {
10		opacity: 1;
11	}
12}
13@keyframes fade-in {
14	0% {
15		opacity: 0;
16	}
17	100% {
18		opacity: 1;
19	}
20}

  • 使用样式

    引用 output.css 和 animate.css

     1{{define you-template-name}}
 2<!DOCTYPE html>
 3<html lang="en">
 4	<head>
 5		<meta charset="UTF-8" />
 6		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8		<title>Document</title>
 9		<link rel="stylesheet" href="/assets/css/output.css" />
10    	<link rel="stylesheet" href="/assets/css/animate.css" />
11	</head>
12	<body>
13		<main>write-you-customize-code-here</main>
14	</body>
15</html>
16{{end}}

  • 使用动画

    当配置fade-in后，可在template使用animate-fade-in调用动画