css学习之transition

最新推荐文章于 2024-01-30 08:30:00 发布

hjy170314

最新推荐文章于 2024-01-30 08:30:00 发布

阅读量228

点赞数

分类专栏：前端知识文章标签：前端样式

本文链接：https://blog.csdn.net/hjy170314/article/details/90294459

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

transition 过渡效果

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

transition的缩写形式

transition: property duration timing-function delay;

property:设定css过渡动画的名称

duration:设定过渡时间（一定要写不然没有效果，默认时间为0）

delay:设定延迟

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。

Safari 支持替代的 -webkit-transition-property 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。

transition-property: none|all|property;

none：没有属性具有过渡效果

all：全部属性具有过渡效果

property ：改名称下的属性具有过渡效果，如果有多个用逗号分隔开

div
{
width:100px;
height:100px;
background:blue;
transition-property: width,height;
transition-duration: 2s;
-moz-transition-property: width,height; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width,height; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: width,height; /* Opera */
-o-transition-duration: 2s; /* Opera */
}

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

transition-duration 过渡时间

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性。

Safari 支持替代的 -webkit-transition-duration 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-duration 属性。

设置过渡效果一定要有这个设置，不然没有效果

transition-timing-function 过渡的速度曲线

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性。

Safari 支持替代的 -webkit-transition-timing-function 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

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)）

cubic-bezier()：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay 过渡延迟

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。

Safari 支持替代的 -webkit-transition-delay 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。

div
{
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome */
-o-transition-delay: 2s; /* Opera */
}