animation动画以及静态动态太极案例的制作
动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
注意
animation-name: 是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。
1. 必要元素：
(a) 通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧。
(b) 通过百分比将动画序列分割成多个节点；
( c) 在各节点中分别定义各属性；
(d) 通过animation将动画应用于相应元素；
2. animation样式常用属性：
(a) 动画序列的名称:animation-name: move;
(b) 动画的持续时间:animation-duration: 1s;
( c) 动画的延时:animation-delay: 1s;
(d) 播放状态:animation-play-state: paused|running;
(e) 播放速度:animation-timing-function: linear;
(f) 播放次数 反复:animation-iteration-count: 1;
(g) 动画播放完结后的状态:animation-fill-mode: forwards;
(h) 循环播放时，交叉动画:animation-direction: alternate;
3.动画缩写
动画的缩写： animation: move 2s linear 0s infinite alternate both;
- 第一个参数：动画的名字
- 第二个参数：动画的耗时
- 第三个参数：动画的速度函数
- 第四个参数：延迟时间
- 第五个参数：播放次数
- 第六个参数：交替动画
- 第七个参数：设置动画的起始的状态
4. 代码说明：
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 300px;
margin: 100px auto;
}
div>img {
width: 100%;
}
/*添加动画*/
@keyframes rotateAni {
0% {
/*可以同时对多个属性添加动画效果*/
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
div:hover>img {
/*动画名称-自定义*/
animation-name: rotateAni;
/*动画时间*/
animation-duration: 1s;
/*动画速率曲线： linear：匀速 ease：动画以低速开始，然后加快，在结束前变慢 ease-in：动画以低速开始 ease-out：动画以低速结束 ease-in-out：动画以低速开始和结束*/
animation-timing-function: linear;
/*动画播放次数*/
animation-iteration-count: 4;
/*动画时间延迟*/
animation-delay: 0s;
/*动画播放完的状态： forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
animation-fill-mode: forwards;
/*动画是否轮流反射播放： alternate:在规定的次数内轮流反射播放 normal:正常播放*/
/*animation-direction: alternate;*/
}
div:active>img {
/*动画的当前播放状态： paused：暂停 running:运行*/
animation-play-state: paused;
}
</style>
4.案例
案例一：动态太极
<style>
#bcircle {
border: 1px solid black;
width: 200px;
height: 400px;
border-width: 2px 200px 2px 2px;
border-radius: 50%;
transition: transform 2s;
margin: 0 auto;
transform: skewX(60deg);
animation: move 2s linear infinite;
}
@keyframes move {
0%{
transform: skewX(60deg) rotateZ(0);
}
100%{
transform: skewX(60deg) rotateZ(360deg);
}
}
.tbcircle {
width: 200px;
height: 200px;
border: 1px solid transparent;
border-radius: 50%;
margin-left: 98px;
margin-top: -2px;
background-color: black;
}
.bbcircle {
width: 200px;
height: 200px;
border: 1px solid transparent;
border-radius: 50%;
margin-left: 98px;
margin-bottom: -2px;
background-color: white;
}
.tbcircle div {
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: 0 auto;
margin-top: 63px;
border-radius: 50%;
background-color: white;
}
.bbcircle div {
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: 0 auto;
margin-top: 63px;
border-radius: 50%;
background-color: black;
}
</style>
<div id="bcircle">
<div class="tbcircle">
<div class="c1">
</div>
</div>
<div class="bbcircle">
<div class="c1">
</div>
</div>
</div>
案例二：静态太极
<style>
#box {
border: 1px solid #000;
width: 200px;
height: 400px;
border-width: 2px 200px 2px 2px;
border-radius: 50%;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid transparent;
border-radius: 50%;
margin-left: 98px;
margin-bottom: -2px;
background-color: black;
}
.cir1{
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: 0 auto;
margin-top: 63px;
border-radius: 50%;
background-color: #fff;
}
.cir2{
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: 0 auto;
margin-top: 63px;
border-radius: 50%;
background-color: #000;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid transparent;
border-radius: 50%;
margin-left: 98px;
margin-bottom: -2px;
background-color: white;
}
</style>
<div id="box">
<div class="box1">
<div class="cir1"></div>
</div>
<div class="box2">
<div class="cir2"></div>
</div>
</div>