为什么预览时会出现卡顿现象?

为什么预览时会出现卡顿现象?

为什么预览时会出现卡顿现象?



<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>transition-timing-function  设置过渡类型</title>

<style>

div{ width:100px; height:100px; background:#E91C1F; margin:100px; transition-timing-function:linear; transition:0.35s; transform:translate(0,0); cursor:pointer;}

div:hover{ transform:translate(500px,0); transition-timing-function:linear;transition:0.35s;}

</style>

</head>


<body>

<div></div>

</body>

</html>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
路大锤 2017-03-02 10:25:40

ease-in-out 和linear是不一样的而效果,ease-in-out规定以慢速开始和结束的过渡效果,linear规定以相同速度开始至结束的过渡效果。

Miss路 2017-03-01 22:13:33

这个不是卡顿,而是你只要鼠标碰到这个方块了,它就会执行你定义的动画,在第一次执行的时候,它往右飘的时候还没有完成它的第一次动画,而此时我们的鼠标又触发了动画,因为这个时候你的鼠标还没有离开红色方块区域。

  • 提问者 江南京华梦3822496 #1
    那要如何解决呢?貌似写全transition:transform 2s ease-in-out 0.35s;的时候就不出现这种情况。
    2017-03-01 22:53:29
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师