css3动画效果抖动解决方法


Posted in HTML / CSS onSeptember 03, 2018

本文介绍了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 来控制状态,具体自己试下哦!

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

HTML / CSS 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 #HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 #HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 #HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 #HTML / CSS
css3绘制百度的小度熊
Oct 29 #HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 #HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 #HTML / CSS
You might like
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Python中join和split用法实例
2015/04/14 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Django 开发环境配置过程详解
2019/07/18 Python
python实现ftp文件传输功能
2020/03/20 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
Ajax的优点和缺点
2014/11/21 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
求职推荐信
2013/10/28 职场文书
领导检查欢迎词
2014/01/14 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
年检委托书
2014/08/30 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
初婚未育证明样本
2014/10/24 职场文书
大学生思想道德自我评价
2015/03/09 职场文书