css动画效果transtion,transform,animation

前几天我在极客学院上学习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: