css3动画效果抖动解决

mating 发布于2019-08-29 16:33 / 743人阅读

摘要：从上部或侧边滑过时时会出现抖动现象，并且动画不能正常显示高度变为，原因是从上部或侧部滑过的同时动画效果生效，变为，而此时鼠标就处于外部的状态，不能生效，因此完整动画不能正常显示，使出现抖动效果一直在到之间抖动。

  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%即可解决

私有云海外云主机 css3动画抖动效果 iOS抖动效果 Android抖动效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113822.html

自己整理的css3动画库，附下载链接

摘要：动画以低速开始，然后加快，在结束前变慢。在函数中自己的值。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。动画调用语法 animation: bounceIn 0.3s ease 0.2s 1 both; 按顺序解释参数：动画名称如：bounceIn 一周期所用时间如：0.3s 速度曲线如：ease 值描述 linear 动画从头...

Darkgel 2019-04-23 14:38 评论0 收藏0
谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...

tracy 2019-06-21 16:14 评论0 收藏0
Web前端常用插件

摘要：弹窗视频嵌入插件幻灯片图片切换手机端响应式日期控件上传图片控件校验控件分页静态分页动态分页相册效果控件多级下拉图片延迟加载或响应式管理模板插件库大转盘九宫格效果整屏滚动滚动效果用于移动项目的光滑菜单浏览器端格式化工具千手观音弹窗 1.blockUI2.overlay 3.sweetAlert 视频 1.jwplayer2.video.js html53.swfobject Flas...

quietin 2019-08-21 10:31 评论0 收藏0