动画--过渡函数 transition-timing-function

最新推荐文章于 2022-05-05 18:21:07 发布

大志天成119

最新推荐文章于 2022-05-05 18:21:07 发布

阅读量4.5k

点赞数

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

(单击图片可放大)

案例展示：

在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。

HTML代码:

<div></div>

CSS代码:

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

演示结果

鼠标移入：

鼠标移出：

任务

在右侧CSS编辑器的第11行输入正确的代码，让容器在hover状态下，从圆形慢慢过渡到矩形，而且过渡动画速度是恒速，也就是linear。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div></div>

</body>
</html>www.dztcsd.com/

大志天成119

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
动画--过渡函数 transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：(单击图片可放大)案例展示：在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。HTML代码:CSS代码:di
复制链接

扫一扫