前几天我在极客学院上学习css3动画有关视频，非常感兴趣，收获如下。
（一）嫦娥飞入飞出的效果
我们的目标是：鼠标移到a元素上，嫦娥飞进月亮，而且要有一种从远处来的模糊感，就是大俗话里的“仙气”；鼠标移走，嫦娥也飞离。
先分析这个要求，从中我们可以知道这涉及到两个动画，一个是位置上的改变，另一个是透明度的改变。
简单介绍下rgba;
rgba(0,0,0,0.5);//正如英文字母所预示那样，RGB是三色，那么A是什么？A是Alpha，即透明度，值为1----不透明。
主体body里是：
<a href="#点击后链接的网址" class="change " target="_blank">
<img src="#嫦娥" alt="" />
</a>
那么想要实现鼠标移入移出对应嫦娥的飞入飞出，我们需要这么来做：
1.添加夜空圆月做背景
.change{
background:url(夜空图URL) no-repeat center;
...}
2..在嫦娥上添加动画，先来设置鼠标没有移上a元素时：
img{
display:block;
width:300px;
height:284px;
opacity:0;//透明度为0，即嫦娥图不显现
-webkit-transform:translate(-100px,-100px);
//以父元素为基准（父元素是a标签，我们设置它长宽,使其成为自动居中长方形区域，那么就是左上角的位置向上，向左各100px），定义了嫦娥飞入的初始位置
transform: translate(-100px,-100px);
-webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
//下面transition的参数表明
//我们要对opacity设置过渡效果
//持续时间为1s,也就是嫦娥要飞一秒
//以慢速开始和结束
//在鼠标移到a标签上0.5s后开始动画
//注意：这个有两个动画效果，一个是opacity，另一个是transform
//transform的解释请直接访问w3school.
transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
}
transition-timing-function:
3.当鼠标移至a元素时
.change:hover img{
-webkit-transform:translate(0px,0px);//嫦娥从（-100px,-10px）移至（0,0）
transform:translate(0px,0px);
opacity:1;//嫦娥图片逐渐显现（透明度从0逐渐变成1）
-webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
}
（二）简单照片墙
目标：鼠标移上去照片扇形展开，移走照片合拢
分析：我们需要定义照片旋转打开的基点，还需要照片打开的角度，在这里设置动画就可以了
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
先来看一下body里的内容:
<div class="cardfan">
<img src="照片1URL" alt="" width="300" height="200"/>
<img src="照片2URL" alt="" width="300" height="200"/>
<img src="照片3URL" alt="" width="300" height="200"/>
</div>
1.为照片设置样式
.cardfan > img{
position:absolute;
…
//设置旋转点的位置
-webkit-transform-origin: center 400px;
transform-origin: center 400px;
-webkit-transition: -webkit-transform .7s ease;
transition: transform .7s ease;
}
2.旋转角度的设置
这里有三张图片，我们可以用选择器来实现效果
.cardfan img:first-child{
-webkit-transform:rotate(5deg);
transform:rotate(5deg);
}
.cardfan:hover img:first-child{
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
同理，我们也可以设置last-child；
（三）闪烁点动画
目标：实现一个圆点原地缩放的效果，类似呼吸灯
分析，实际上就是一个大圆点的缩放问题那么就要应用到transform
animation 属性是一个简写属性，用于设置六个动画属性：
body里的内容
<div class="spinner"></div>
1.绘制圆点
.spinner{
width:40px;
height:40px;
background-color:green;
border-radius:50%;//变圆形
margin: 100px auto;
/*第一个参数需要绑定到选择器的keyframes名称blink
一次动画需要1s
无限次闪烁
以慢速开始和结束*/
-webkit-animation:blink 1.0s infinite ease-in-out;
animation:blink 1.0s infinite ease-in-out;
}
2.设置闪烁效果（要考虑各浏览器的兼容问题哦）
@keyframes fadeOut{
form{transform:scale(0.0);}
to{transform:scale(1.0);opacity:0;}
}
/*定义了从缩到没有到伸展到原来模样
scale定义伸缩；*/
（四）border旋转
目标：鼠标移入，边框旋转180，移出复位；也可以结合嫦娥的案例，使文字随着鼠标的移入移出来显示和消失
分析：border旋转，是独自旋转，所以需要将其独立出来，旋转需要用到的是transform；文字的变换请参考第一个例子
border-color:yellow red blue green;/*按照上下左右的顺序来设置颜色*/
body里的内容：
<a href="#" class="demo">
<div class="img" style="background-image:url(背景图URL"></div>
<div class="mask">
<div class="text">
<h3>弦月</h3>
<p>红霞朦江桥</p>
</div>
</div>
<div class="border"></div>
</a>
1.img样式
.img{
background-repeat:no-repeat;
background-size:cover;/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域*/
background-position: center center;
border-radius:50%;/*圆形*/
}
2.border的动画效果设置
.border{
position:absolute;
border:10px solid #E08E05;
border-top-color:#20629C;
border-left-color:#20629C;
top:0;
left:0;
border-radius:50%;
-webkit-transition: all .5s ease-in;/*以慢速开始*/
transition:all .5s ease-in;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.demo:hover .border{/*边框旋转180度*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
3.文字动画的设置
.mask{
position:absolute;
top:0;
left:0;
border-radius:50%;
-webkit-transition:all .5s ease-in;/*以慢速开始*/
transition:all .5s ease-in;
color:rgba(255,255,255,0);//透明度为0，不可见文字
}
.demo:hover .mask{
color:rgba(255,255,255,1);/*文字显现*/
}
（五）钟摆运动
body里内容
<div class="stage">
<img src="钟表图" alt="钟表" class="watch"/>
</div>
动画的设置
.stage{
width:120px;
height:auto;
margin:0 auto;
position:relative;
transform-origin:center top;/*定位表摆动的基点，顶部中点*/
-webkit-transform-origin:center top;
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-animation:sway 2.2s infinite alternate ease-in-out;/*alternate实现来回运动*/
animation:sway 2.2s infinite alternate ease-in-out;
}
@keyframes sway{
to{
transform:rotate(30deg);
}
}/*使得钟表图在定义的基点位置左右各30度来回摆动*/
（六）圆弧运动
animation实现
1.正圆运动
定义中心位置，定义起始位置，使得从起始位置绕中心位置做正圆运动
.rocketship{
width:130px;
height:250px;
background:url(飞机图URL);
background-size: cover;
-webkit-transform-origin: 200% center;/*定义起始位置，其实这样的话，整个圆形就可以确定了，有圆心，有半径*/
transform-origin: 200% center;
-webkit-animation:circle 3s infinite linear;
animation:circle 3s infinite linear;
}
@keyframes circle{
to{
transform: rotate(360deg);/*一周360度*/
}
}
2.椭圆运动
正圆运动其实可以看成是正圆运动和上下运动的叠加，此时必须要保证正圆运动一周，上下运动一个来回。这样才可以叠加为一个椭圆运动
正圆运动
.plane{
width:150px;
height:142px;
margin: 0 auto;
-webkit-transform-origin:center 150%;
transform-origin:center 150%;
-webkit-animation:circle 2s infinite linear;
animation:circle 2s infinite linear;
}
@keyframes circle{
to{
transform:rotate(-1turn);/*逆时针做圆运动*/
}
}
上下运动
figure{
margin-left: 200px;
-webkit-animation:updown 1s infinite ease-in-out alternate;/*来回运动*/
animation:updown 1s infinite ease-in-out alternate;
}
@keyframes updown{
to{
transform:translateY(200px);
}
}
