整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS3过渡属性详解,如何让简单代码轻松实现页面动画

CSS3过渡属性详解,如何让简单代码轻松实现页面动画?

SS3 transition属性允许CSS元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。接下来就一起去看看这个CSS3属性吧!

一、CSS3的transition属性

transition属性的作用就是指定当你的元素某些样式发生变化时,这些样式可以渐渐过渡到最终属性值。transition属性是一个简写的复合属性,其中包含了四个过渡属性。

1、transition 简写的复合属性,用于在一个属性中设置四个过渡属性。

2、transition-property 规定应用过渡的CSS属性的名称。

3、transition-duration 定义过渡效果花费的时间,默认是0。

4、transition-timing-function 规定过渡效果的时间曲线,默认是"ease"。

5、transition-delay 规定过渡效果何时开始,默认是0。

transition-property 用于产生过渡动画的单个或多个属性,或者过渡所有属性的关键字all。

transition-duration 渐变时间属性值为 “数值+s” ,代表多少时间完成过渡效果。

transition-timing-function 是可选属性值。

有如下可选值

1、linear线性过渡,ease(默认)平滑过渡,ease-in由慢到快、由快到慢,ease-in-out由慢到快再到慢,

2、step-start等同 steps(1, start),step-end等同 steps(1, end)

3、steps()两个参数的步进函数。第一个参数为正整数,指定函数步数。第二个参数取值是start或end,指定每一步的值发生变化的时间点。第二个参数可选,默认值为end。

4、cubic-bezier(num, num, num, num)特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内。

transition-delay可选属性值,设置延迟过渡(即设置多少时间后再开始过渡),延迟的时间值为“数值+s”。该属性可以对多个不同的属性进行设置,用逗号隔开。

二,可用于过渡的属性

不是所有的样式都可以过渡,如说display:block不能过渡到display:inline-block。那么具体有哪些属性可以用于过渡呢?下面列举了部分可以用于过渡的属性

部分可用于过渡的属性示意图

三、兼容性

transition属性浏览器兼容性

transition属性浏览器兼容性

注:Internet Explorer 9 以及更早的版本不支持 transition 属性,且Chrome 25 以及更早的版本,需要前缀 -webkit-。

使用过渡属性而不是脚本的另一个原因是脚本方法改变多个元素样式可能会产生冲突,transition过渡属性就不需要考虑这个问题元素与元素之间互不影响。元素过渡需要知道样式具体的起始属性和末尾属性,如宽度从10px变化到100px。

四、transition属性的运用

示例一

控制单个属性(如width)过渡

改变单个属性示例

示例二

控制多个属性(如transform,background,background,height)过渡。

element{

-webkit-transition:-webkit-transform 5s,background 5s,width 5s,height 5s;

-moz-transition-property:width,height,-o-transform,background,;

-moz-transition-duration:5s,5s,5s,5s;

-o-transition-property:width,height,-o-transform,background;

-o-transition-duration:5s,5s,5s,5s;

transition-property:width,height,transform,background;

transition-duration:5s,5s,5s,5s;

}

感谢您阅读了这篇文章,希望会对您有所帮助。喜欢我就关注我吧,后面的文章内容会越来越精彩喔!

天就来分享一些网页中会用到的展示的小效果

很多栏目的边框当鼠标移上去的时候,边框会有移动的色泽变化,有顺时针过渡或者逆时针过渡的效果

下面看看效果:

实现代码:

SS实现一个高度过度的动画 ,针对于属性height,设置一个transition动画就能实现我们想要看到的效果。而这个高度在实际情况下, 我们并不希望它是一个固定的值,需要做的更灵活一点,比如随着内容的增减自适应,所以,有人就会想到使用transition将高度从0过度到auto,然而,这样实现动画效果会生效吗?有没有更优秀的技巧或者方法了?

有的,今天和大家聊一聊这个问题。

文章中讲解的DOM结构,如下

效果如下,鼠标移上去的时候,下面这段文字展示(<mark>动画效果</mark> )

01. height过度0到auto?

默认的时候高度设置成0,鼠标移上去的时候,将高度设置成auto,像下面代码这样

从效果上来看,这个变化是瞬间的,并没有500毫秒过度效果。也就是说CSS不能使用transition实现height从0过度到auto。

这不符合我们的预期效果。

02. height过度0到固定值?

竟然auto不能动画过度,那我们就改成固定的值(最简单的就是改成数字),比如,从0过度到300。这样过度效果就生效了。

虽然这样能过度过去,但这不是一个很优的方法, 因为这样处理的话,我们得通过JS去计算这个高度,才能确保我们的功能不出BUG。

03. max-height过度0到固定值?

为什么不试一下最大高度了?

max-height从0到固定值也是可以animation过去的,唯一不太好的地方就是,我们的内容有可能会溢出,毕竟我们设置的只是一个最大的高度。

如果需求能保证内容的高度永远不会达到一定的值,用这个方法完全没什么问题。我们只需要设置一个适当的最大高度值就好。

04. 过度grid-template-rows?

这个时候,网格布局给我们提供了另外一个巧妙的解决方案。

只需要将grid-template-rows从0fr过度到1fr。如此一来,我们的网格项将从0过渡到其'自然'高度。这应该就是比较完美的解决办法。

代码如下

功能是实现了,我也不得不关注一下这属性的兼容性问题。

注意到chrome从107版本开始支持这个属性。