css3动画效果抖动解决⽅法
本⽂介绍了css3动画效果抖动解决⽅法，分享给⼤家，具体如下：
div{
height: 20%;
}
css鼠标点击样式
@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 来控制状态，具体⾃⼰试下哦！
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。