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>