前言
-
本文主要内容：
过渡：transition
2D 转换 transform（scale，translate，rotate）
3D 转换 transform（translatex,translatey,translatez,rotatex,rotatey,rotatez）
动画：animation
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
**下面都是这些内容的应用实例**
1.动画走一个正方形
<!-- 声明部分 -->
<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>动画</title><!-- 标题 -->
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.box1{
width:200px;
height:200px;
background-color:#C63;
animation:move 4s infinite;<!--声明动画明一次动画执行时间以及动画执行次数-->
}
@keyframes move{
0%
{
transform:translateX(0px) translateY(0px);
background-color:#F9C;
border-radius:0%;<!--圆角-->
}
25%
{
transform:translateX(200px) translateY(0px);
background-color:#3FC;
}
50%
{
transform:translateX(200px) translateY(200px);
background-color:#06F;
border-radius:50%;
}
75%
{
transform:translateX(0px) translateY(200px);
background-color:#F90;
}
100%
{
transform:translateX(0px) translateY(0px);
background-color:#C63;
border-radius:0%;<!--圆角-->
}
</style>
</head>
<body>
<div class="box1"></div>
</body><!-- 主体 -->
</html>
亲们，因为我现在没有录屏软件所以上传不了动态效果望多多见谅，自己尝试一下哟！！！
一定要多练
2.简易模拟秒表的情形
很有趣的自己试试
<!-- 声明部分 -->
<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>div布局</title><!-- 标题 -->
<style type="text/css">
div{
width:5px;
height:100px;
background-color:#000;<!--这三句建立一个秒针-->
margin:0px auto;
transform-origin:center bottom;
animation:myclock 60s steps(60) infinite;
}
@keyframes myclock{
0%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body><!-- 主体 -->
</html>
3.3D呈现一个正方体（6面体旋转）
<!-- 声明部分 -->
<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>动画</title><!-- 标题 -->
<style type="text/css">
<!清除默认样式-->
*{
margin:0px;
padding:0px;
}
.box{
width:250px;
height:250px;
border:1px #FF0000 dashed;<!--设置边框-->
margin:100px auto;<!--水平居中-->
position:relative;<!--相对定位-->
transform-style:preserve-3d;<!--使之呈现3D效果-->
animation:ti 8s linear infinite;<!--动画名称，一次动画执行时间，运动曲线，执行次数-->
}
.box>div<!--兄弟选择器-->
{
width:100%;
height:100%;
position:absolute;<!--绝对定位-->
text-align:center;<!--文本居中就是让前后左右上下这些字居中-->
line-height:250px;<!--文本垂直居中就是让前后左右上下这些字居中-->
font-size:60px;<!--设置字体大小-->
color:#F96;<!--设置字体颜色-->
}
.left{
background-color:#0CF;
transform-origin:left;<!--改变旋转时的坐标点-->
transform:translatex(-125px) rotatey(90deg);
}
.right{
background-color:#6C9;
transform-origin:right;
transform:translatex(125px) rotatey(90deg);
}
.forword{
background-color:#F60;
transform:translatez(125px);
}
.back{
background-color:#639;
transform:translatez(-125px);
}
.up{
background-color:#C93;
transform:translatez(125px) rotatex(90deg);
}
.down{
background-color:#CF3;
transform:translatez(125px) rotatex(-90deg);
}
@keyframes ti
{
0%
{
transform:rotatex(0deg) rotatey(0deg);
}
100%
{
transform:rotatex(360deg) rotatey(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forword">前</div>
<div class="back">后</div>
</div>
</body><!-- 主体 -->
</html>
静态图如下：自己可以尝试一下看一下动态效果！！！
