CSS3 transition-timing-function 属性

最新推荐文章于 2024-01-04 09:23:43 发布
最新推荐文章于 2024-01-04 09:23:43 发布
阅读量716 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine940326/article/details/48771551
版权

CSS3 transition-timing-function 属性

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。
这里写图片描述

实例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}

/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>

<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>
sunshine940326
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3属性——transition-timing-function
line233的博客
05-14 1366
transition-timing-function:定义以相同的速度从开始到结束的过渡效果，W3C是这样解释的 前五个属性值很容易理解，最后那个cubic-bezier(n,n,n,n)可以说是最难的了，我们借助下面这张图去理解。 我们先将 cubic-bezier的形式变为cubic-bezier(x1, y1, x2, y2) 图上有四点，P0-3，其坐标的取值范围为 0...
transition-timing-function 属性
weixin_30394981的博客
04-12 694
以相同的速度从开始到结束的过渡效果： div { transition-timing-function: linear; -moz-transition-timing-function: linear; /* Firefox 4 */ -webkit-transition-timing-function: linear; /* Safari 和 Chrome */ -o-trans...
过渡函数transition-timing-function
weixin_33943836的博客
06-04 282
转载于:https://www.cnblogs.com/family-626-77/p/5558151.html
CSS3 动画--过渡函数 transition-timing-function
21号先锋者
02-24 1147
动画--过渡函数 transition-timing-function transition-timing-function属性指的是过渡的“缓动函数”。 主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。 linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。 e...
CSS3新属性transition-property transform box-shadow实例学习
09-25
`transition-timing-function`决定了过渡的速度曲线，`ease-out`表示过渡开始时慢，结束时快。 接下来是`transform`属性，它允许我们对元素进行二维或三维的变换，如旋转、缩放、移动等。在这个例子中，`.text:...
利用CSS3的transition属性实现滑动效果
01-21
定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay注释：请始终设置 transition-duration 属性，否则时长为 0，...
CSS3使用transition属性实现过渡效果
09-24
在CSS3中，transition属性由四个子属性构成，分别是transition-property、transition-duration、transition-timing-function和transition-delay。 1. `transition-property`：此属性用于指定需要应用过渡效果的CSS...
CSS3中Transition属性详解以及示例分享
10-25
CSS3中的Transition属性是网页设计中一种强大的工具，它允许元素在状态变化时平滑地过渡，而不是突然跳变。Transition由四个核心属性组成：transition-property、transition-duration、transition-delay和transition...
CSS3中Transition动画属性用法详解
12-13
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...
【CSS3】动画--过渡函数 transition-timing-function
O(∩_∩)O
02-24 1794
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： (单击图片可放大) 案例展示： 在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。 HTML代码: CSS代码: di
动画--过渡函数 transition-timing-function
weixin_30782293的博客
08-30 306
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： (单击图片可放大) 案例展示： 在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。 HTML代码: <div></div> ...
transition-timing-function
a1104381972的博客
08-05 718
transition-timing-function：语法：transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,
css3之transition-timing-function
Focus-Fe
01-24 173
transition-timing-function   取值：   ease                    等同贝塞尔曲线(0.25,0.1,0.25,1.0)        逐渐慢下来 linear                   等同贝塞尔曲线(0.0,0.0,1.0,1.0)            线性过度 ease-in                等同...
CSS3中的动画--过渡函数 transition-timing-function
huangbaokang的博客
08-27 3083
transition-timing-function 属性规定过渡效果的速度曲线。 JavaScript语法： object.style.transitionTimingFunction="linear" transition-timing-function语法： transition-timing-function: linear|ease|ease-in|ease-out|ease...
css transition ease,CSS3 transition-timing-function 属性 | 菜鸟教程
weixin_39956350的博客
08-03 551
CSS3 transition-timing-function 属性实例过渡效果以同样的速度从开始到结束：transition-timing-function: linear;-webkit-transition-timing-function: linear; /* Safari and Chrome */尝试一下 »浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webki...
[业余难点整理] xxx-timing-function 过渡效果
weixin_44275036的博客
10-15 186
3. 关于 Animation-timing-function 下列说法正确的是 linear是默认动画，动画从头到尾的速度是相同的 ease是默认动画，动画以低速开始，然后加快，在结束前变慢 cubic-bezier (n, n, n, n)，在cubic-bezier函数中自己的值。可能的值是从0到100的数值 ease-in 动画以低速结束 解析：过渡效果的默认值都为 ease，慢 — 快 — 慢 CSS3 transition-timing-function 属性 指定切换效果的速度
CSS3 transition 过渡
qq_43344133的博客
07-02 625
CSS3 transition 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 transition:[<transition-property> || <transition-duration> || <transition-t...
transition-timing-function属性
最新发布
iiiF_的博客
01-04 475
ease:以慢速开始，然后加快，最后慢慢结束的过度效果，等同于cubic-bezier(0.25,0.1,0.25,1)ease-in-out：指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1)ease-in:以慢速开始，然后逐渐加快的过渡效果，等同于cubic-bezier(0.42,0,1,1)ease-out:指定以慢速结束的过渡效果，等同于cubic-bezier(0,0,0.58,1)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值