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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
使用ECharts实现状态区间图
2018/10/25 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
python正则表达式的使用
2017/06/12 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
解决python replace函数替换无效问题
2020/01/18 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
让生命充满爱演讲稿
2014/05/10 职场文书
小学运动会开幕词
2015/01/28 职场文书
应届生简历自我评价
2015/03/11 职场文书
预备党员党支部意见
2015/06/02 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS