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