css3动画效果抖动解决方法

  发布时间:2018-09-03 15:12:44   作者:liaojin1   我要评论

这篇文章主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了css3动画效果抖动解决方法,分享给大家,具体如下:

 div{
      height: 20%;
   }
  @keyframes shanghua{
    from{
      height: 0%;
    }
    to{
      height: 60%;
    }
  }
  div:hover{
    animation: shanghua 1s linear forwards;
  }

从div上部或侧边滑过时div时会出现抖动现象,并且动画不能正常显示高度变为60%,原因是从上部或侧部滑过的同时动画效果生效,height变为0%,而此时鼠标就处于div外部的状态,hover不能生效,因此完整动画不能正常显示,使div出现抖动效果height一直在20%到0%之间抖动。解决办法将@keyframes的from中的height属性设置为20%即可解决

另一种方法:CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。

这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,下面一起来看看介绍:

使用教程

首先引入css shake的样式表文件。

<link type="text/css" href="csshake.css">

给你的DOM元素添加shake class样式

<div class="shake"></div>

添加抖动样式,一共9种,也可以看DEMO对应添加即可

<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>

另外我还能通过 .freeze, .shake-constant & .hover-stop 来控制状态,具体自己试下哦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • css3让div随鼠标移动而抖动起来

    一些背景图片随着鼠标的移动的反向的移动,感觉跟不错,下面为大家介绍喜爱使用css3让div随鼠标移动而抖动起来,感兴趣的朋友可以参考下
    2014-02-10

最新评论