css3元素出现动画实例

css3中实现动画通常有两种方式，一个是transition过渡，一个是animation动画。最主要区别就是transition须要条件触发，一般会用hover来触发，而animation则更灵活，能够自动播放，也能够经过条件触发。

那么，如何实现一个元素出现动画呢？

若是是transition，能够很轻松的实现这一效果，例如

.box{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
复制代码

这样就实现了一个“从下至上，透明度从0至1”的出现动画，很经常使用不是吗。

codepen.io/xboxyan/pe.…点击预览

固然，咱们也能够用animation来实现，

.box{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  animation:show .5s forwards;
}

.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(100px)
  }
}
复制代码

个人天，竟然要写这么多，才能实现和上面同样的效果，没办法，出现和消失是两组不一样的动画，因此须要定义两个动画。

codepen.io/xboxyan/pe.…点击预览

元素出现动画

上面简单的介绍了动画的两种实现方法。严格来说，transition只是过渡，只是切换样式过程当中有动画的效果，而animation才是真正作动画的。固然也须要根据本身的实际需求来选择。

下面来看这样一个需求：

一般页面上要全局显示一个消息提示，相似于toast效果。这是我一般的作法

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    oDiv.classList.add('show');
    this.timer = setTimeout(function(){
      oDiv.classList.remove('show');
    },2000)
}
复制代码

原理就是，向页面添加一个div#messageInfo容器，而后添加类名.show让元素出现，2s后自动移除.show实现隐藏，效果以下

codepen.io/xboxyan/pe.…点击预览

能够很明显的看到一个效果就是，第一次出现的时候是没有动画的，之后就正常了。可能平时项目中，这一点小瑕疵也没什么影响，毕竟很大一部分人连动画都不给啊，直接就是display:none和display:block，能够说是提不上体验了。

那么，为何会出现这种现象呢？

首先明白一点，transition是不会自动触发的，上面是经过添加和移除类名来实现过渡效果的。可是在第一次元素刚刚建立的时候，此时在页面上该元素还未加载完成，这个时候当即添加类名，实际上是能够等同因而一块儿建立的，没有造成过渡效果。解决这个问题很简单，就是稍微延时一下

//...
setTimeout(function(){
   oDiv.classList.add('show');
},50)
//...
复制代码

这样就基本上解决了这个问题，以下

codepen.io/xboxyan/pe.…点击预览

可是，理论上这里的延迟越小越好，我测试了一下，大概和浏览器的性能有关吧，用定时器的目的也仅仅是等待元素加载完成，而dom也没有原生监听加载完成事件，因此只能用定时器估一个大概的值。

可是，这仍然是一个瑕疵，从代码结构上来说，这也是没法忍受的。那么，还有没有更好的方法呢？答案就是animation

Animation

虽然从开头的例子来看，animation的写法又臭又长，可是也正体现出它的功能强大，其中之一就是自动播放动画

那么，把上面的toast改造一下，用animation实现

.messageInfo{ 
    /**...**/
    animation:show .5s forwards;
}
.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(-100%)
  }
}
复制代码

js基本和以前一致

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    oDiv.classList.remove('hide');//默认是显示
    this.timer = 
      setTimeout(function(){
      oDiv.classList.add('hide');//2s后隐藏
    },2000)
}
复制代码

效果以下

codepen.io/xboxyan/pe.…点击预览

能够说是至关完美了

其余应用场景

元素添加动画

一般在添加表单或者上传图片时，若是须要让新添加的元素产生一个动画效果，那么能够用到animation

codepen.io/xboxyan/pe.…点击预览

固然，还能够作到分页加载动画，须要给每一个元素添加一个延时animation-delay便可

/*animation-delay*/
.list li:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}
.list li:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}
.list li:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}
.list li:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}
.list li:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}
复制代码

效果以下，元素会依次登场，预览窗口比较小，建议在原连接点击预览 查看

codepen.io/xboxyan/pe.…点击预览

而后，还能够实现九宫格动画，让元素在出现的时候从左上方依次向右下方扩散，一样是用到了animation-delay

codepen.io/xboxyan/pe.…点击预览

很酷炫不是吗，无需用到js，也无需用到其它框架，纯自然，支持的浏览器体验更上一层楼，不支持的浏览器也无伤大雅

小节

整体来讲，animation远比transition要强大的多，固然在实际使用中也要分场景（好比文章开头的那个例子很明显就是transition更好），若是有交互，如鼠标移入，首先看transition可否实现，其次才是animation，若是像这一类元素出现（生成）动画，那么就须要使用到animation了。

最后，给你们推荐一个 前端学习进阶内推交流群685910553（ 前端资料分享），无论你在地球哪一个方位， 无论你参加工做几年都欢迎你的入驻！（群内会按期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

若是您对这个文章有任何异议，那么请在文章评论处写上你的评论。

若是您以为这个文章有意思，那么请分享并转发，或者也能够关注一下表示您对咱们文章的承认与鼓励。

愿你们都能在编程这条路，越走越远。