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 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 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
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php实现简单爬虫的开发
2016/03/28 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
小程序实现密码输入框
2020/11/16 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
会计电算化应届生求职信
2013/11/03 职场文书
干部现实表现材料
2014/02/13 职场文书
旅游市场营销方案
2014/03/09 职场文书
学生操行评语大全
2014/04/24 职场文书
党员演讲稿
2014/09/04 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
三好学生事迹材料
2014/12/24 职场文书
2015年环卫工作总结
2015/04/28 职场文书
小学三年级作文之写景
2019/11/05 职场文书
详解Vue的options
2021/05/15 Vue.js
python Django框架快速入门教程(后台管理)
2021/07/21 Python