C3动画+animation动画库

动画的分类及使用

CSS3中的动画分为：平移动画、过渡动画和自定义动画三种。

平移动画：transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew；
过渡动画：transition: transition是一个复合属性，包括：
transition-property:过渡属性(即哪些元素使用过渡动画)；
transition-delay：过渡延时；
transition-duration：过渡时间；
transition-timing-function：过渡方式（linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认，以低速开始，然后加快，在结束前变慢。）
//注：如果写复合属性，参数顺序可以随便写，但是先写的时间一定是持续时间。
自定义动画(帧动画）：animation: 动画名称时间运动方式是否循环;
animation-name: zidingyi; 动画名称;
animation-delay: 1s ; 动画延迟时间;
animation-direction: alternate; 动画的播放方向（alternate表示第135次正向播放，246次反向播放);
animation-duration: 3s; 动画的播放时间;
animation-iteration-count: 1; 动画的播放次数（如果其后的属性值为infinite，则表示自定义的动画一直循环播放;
animation-play-state: running; 动画播放是否暂停;
animation-timing-function: linear; 动画的播放方式;

动画播放序列的声明：（两种写法）
@keyframes[空格] [定义的动画名]{
方式一：from{ }
to{ }
使用“from”和“to”来代表一个动画是从哪开始，到哪结束。也就是说这个 “from"就相当于"0%”，而"to"相当于"100%"

方式二：0%{ }
30%{ }
50%{ }
80%{ }
100%{ }

可以在这个规则中创建多个百分比，分别在每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素颜色、位置、大小、形状等。数值段必须是百分数，如果不是百分数，这个keyframes是无效的，不会起任何作用。keyframes的单位只接受百分比值

}

对同一样式的动画设置不同的延迟时间及动画时间，产生的最终效果可能不同；
transform和animation这两个属性不能同时使用，否则默认执行animation帧动画，transform属性无用，若要使用该属性，可以再给它包一个div，对这个div设置transform属性（不把两个属性用在同一元素下即可。）；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         body {
10             background-color: skyblue;
11         }
12         
13         div {
14              200px;
15             height: 400px;
16             background-color: #fff;
17             border-left: 200px solid black;
18             margin: 100px auto;
19             border-radius: 50%;
20             animation: run-inner 2s infinite linear;
21         }
22         
23         div::before,
24         div::after {
25             content: "";
26             display: block;
27              50px;
28             height: 50px;
29             border-radius: 50%;
30             margin-left: -100px;
31         }
32         
33         div::before {
34             background-color: #fff;
35             border: 75px solid black;
36         }
37         
38         div::after {
39             background-color: #000;
40             border: 75px solid #fff;
41         }
42         
43         @keyframes run-inner {
44             0% {
45                 transform: rotate(0deg);
46             }
47             50% {
48                 transform: rotate(-180deg);
49             }
50             100% {
51                 transform: rotate(-360deg);
52             }
53         }
54     </style>
55 
56 </head>
57 
58 <body>
59     <div></div>
60 </body>
61 
62 </html>

animation动画库

1、首先引入animate css文件

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

2、给指定的元素加上指定的动画样式名

 
<div class="animated bounceOutLeft"></div>
 
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <link rel="stylesheet" href="./animate.css-main/animate.css">
 9     <style>
10         #box {
11              200px;
12             height: 200px;
13             background-color: red;
14             margin: 200px 200px;
15         }
16         
17         #box {
18             animation: wobble 1s infinite;
19             /*想要改变值可以替换wobble*/
20         }
21     </style>
22 </head>
23 
24 <body>
25     <div id="box"></div>
26 </body>
27 
28 </html>

动画库转载于https://www.cnblogs.com/starof/p/4968769.html