css3动效一：transition 过渡的简单整理

最新推荐文章于 2024-05-29 11:10:46 发布

置顶差不少

最新推荐文章于 2024-05-29 11:10:46 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/c62387723sq/article/details/89679764

版权

css 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

动效

3 篇文章 0 订阅

订阅专栏

transition 过渡

语法（简写）：transition:porperty duration timing-function delay

例：transition: width 2s 1s,height 2s 2s,background-color 3s 1s;（连写示例多个以逗号分隔）

注：在开发的时候，推荐尽可能的使用简写属性。

属性：

transition-porperty
需要使用过渡的css的属性的名称

属性值：
none
all
property
(css属性名称，用逗号进行分隔)

transition-duration
过渡需要的时间 s/ms

transition-timing-function
过渡效果的时间曲线，默认为ease

属性值：

cubic-bezier (n,n,n,n)
贝塞尔曲线
关于`贝塞尔曲线，可以参考下面的网址：http://cubic-bezier.com/#.17,.67,.94,.18

linear
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

ease
规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))

ease-in
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）

ease-out
慢速结束过渡效果等于 cubic-bezier(0,0,0.58,1)

ease-in-out
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

transition-dely
延迟
transition: width 2s 1s（该简写中的1s为延迟）

简单示例（摘抄自菜鸟网）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

差不少

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3动效一：transition 过渡的简单整理

transition 过渡语法（简写）：transition:porperty duration timing-function delay例：transition: width 2s 1s,height 2s 2s,background-color 3s 1s;（连写示例多个以逗号分隔）注：在开发的时候，推荐尽可能的使用简写属性。属性：transition-porperty需要使用...
复制链接

扫一扫

专栏目录