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,js)
Dec 12 HTML / CSS
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
AngularJS入门之动画
2016/07/27 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
Vue组件开发初探
2017/02/14 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python绘制热力图heatmap
2020/03/23 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
工程售后服务承诺书
2014/05/21 职场文书
实习公司领导推荐函
2014/05/21 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
职位证明模板
2015/06/23 职场文书
工作感想范文
2015/08/07 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android