动画的分类及使用
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 width: 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 width: 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 width: 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