css3元素动画实例

更新日期: 2019-04-18阅读: 2.4k标签: 动画

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”的出现动画,很常用不是吗。https://codepen.io/xboxyan/

当然,我们也可以用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)
  }
}

我的天,居然要写这么多,才能实现和上面一样的效果,没办法,出现和消失是两组不同的动画,所以需要定义两个动画。https://codepen.io/xboxyan/


元素出现动画

上面简单的介绍了动画的两种实现方法。严格来讲,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实现隐藏,效果如下:https://codepen.io/xboxyan/

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

那么,为什么会出现这种现象呢?

首先明白一点,transition是不会自动触发的,上面是通过添加和移除类名来实现过渡效果的。但是在第一次元素刚刚创建的时候,此时在页面上该元素还未加载完成,这个时候立即添加类名,其实是可以等同于是一起创建的,没有形成过渡效果。解决这个问题很简单,就是稍微延时一下

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

这样就基本上解决了这个问题,如下:https://codepen.io/xboxyan

但是,理论上这里的延迟越小越好,我测试了一下,大概和浏览器的性能有关吧,用定时器的目的也仅仅是等待元素加载完成,而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)
}

效果如下:https://codepen.io/xboxyan/

可以说是相当完美了


其他应用场景

元素添加动画

通常在添加表单或者上传图片时,如果需要让新添加的元素产生一个动画效果,那么可以用到animation:https://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;
}

效果如下,元素会依次登场,预览窗口比较小,建议在原链接查看:https://codepen.io/xboxyan/

然后,还可以实现九宫格动画,让元素在出现的时候从左上方依次向右下方扩散,同样是用到了animation-delay:https://codepen.io/xboxyan/

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


小节

总体来说,animation远比transition要强大的多,当然在实际使用中也要分场景(比如文章开头的那个例子很明显就是transition更好),如果有交互,如鼠标移入,首先看transition能否实现,其次才是animation,如果像这一类元素出现(生成)动画,那么就需要使用到animation了。


链接: https://www.fly63.com/article/detial/2922

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

Vue 动画的封装

js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!