版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
简单动画库的制作
如下是动画库创建的方法步骤：
1.首先创建一个页面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* 对整个body标签内的内容整体居中 */
body{
text-align: center;
}
</style>
<body>
<h2 class="cj-animation cj-infinite cj-jump">文字“穷凶极恶”弹跳动画</h2>
</body>
</html>
上面代码的运行结果是：
2.创建一个动画库的css文件
将这个文件引入上面创建的html文件中，代码如下：
/* 这里要注意一下，由于我所创建的css文件是跟这个html文件在同一文件下，要看好自己的文件路径，不要直接复制，这样会找不到css文件。*/
<link rel="stylesheet" href="./index.css">
3.将需要展示的动画写入到创建的css文件中
代码如下：
.cj-animation{
/* 默认执行所有动画名字 ，这里的cj-animation动画基类名是由自己取的，不需要一样，
可以在里面定义一些公共的样式动画，如果要改变其中的基类中的一些属性，
可以在所需动画中利用权值大小将基类中的属性值覆盖掉，这样就可以改变基类
中的一下属性了*/
animation:all;
/* 默认每个动画执行时间 */
animation-duration: 2s;
/* 所有动画均匀速执行 */
animation-timing-function: linear;
}
/* 始终是否循环执行 */
.cj-infinite{
animation-iteration-count: infinite;
}
/* 设置延迟执行时间*/
.delay-1s{
animation-delay: 1s;
}
.delay-2s{
animation-delay: 2s;
}
.delay-3s{
animation-delay: 3s;
}
.delay-4s{
animation-delay: 4s;
}
.delay-5s{
animation-delay: 5s;
}
/* 设置动画执行时间长短 */
.fast{
animation-duration: 500ms;
}
.faster{
animation-duration: 200ms;
}
.slow{
animation-duration: 2s;
}
.slower{
animation-duration: 3s;
}
/* 定义动画样式 */
/* 文字跳跃 */
@keyframes cj-jump {
from,
20%,
50%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
45% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.cj-jump{
animation-name: cj-jump;
}
运行代码结果如下：
可能文字跳跃等动画不可以用图片展示起来，只能通过自己去尝试了，这里说声抱歉。。。。。
这里再举一个心跳的动画吧，其他一些比较难的3d平移和旋转等动画就不再详说了。具体代码：
html文件的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<style>
/* 对整个body标签内的内容整体居中 */
body{
text-align: center;
}
</style>
<body>
<h2 class="cj-animation cj-infinite cj-jump">文字“穷凶极恶”弹跳动画</h2>
<h2 class="cj-animation cj-infinite cj-heartBeat">文字“逆天而行”弹跳动画</h2>
</body>
</html>
css文件的代码
/* cj-heartBeat */
@keyframes cj-heartBeat{
from,50%,to{
transform: scale(1);
}
25%,60%{
transform: scale(1.5,1.3);
}
}
.cj-heartBeat{
animation-name: cj-heartBeat;
}
动画效果的图片：
总结
以上就是创建动画库的过程，上面代码中的一些css样式就不去注释并且细说了，只要知道如何创建动画库的步骤，那些动画样式可以自己去详细去学一下，这里只是介绍创建动画库的方法，88。