视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS3中过渡动画怎么使用
2020-11-27 18:49:47 责编:小采
文档

我们知道,在CSS3中有一个 transition属性,它可以让动画在CSS层面实现,既不是利用setInterval(),不是定时器,而是底层C++在渲染,这样就使渲染动画的质量、丝滑程度都要远远优于JS、jQuery。我们今天就来看一下这个 transition属性的具体使用方法。

要我们传统制作网页动画的思维模式,现在的手机页面中,绝对不会有任何动画是setInterval()完成的,而都是过渡实现的。

语法:transition: property duration timing-function delay;时间的单位是:秒(s)。

transition-property 指定CSS属性的name,transition效果 none 没有属性会获得过渡效果。

all 所有属性都将获得过渡效果。

property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

transition-duration transition效果需要指定多少秒或毫秒才能完成 规定完成过渡效果需要花费的时间(以秒或毫秒计)。

默认值是 0,意味着不会有效果。

transition-timing-function

指定transition效果的转速曲线

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(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay 定义transition效果开始的时候 指定秒或毫秒数之前要等待切换效果开始

什么属性可以参与过渡

几乎所有的CSS属性都能过渡。

JQuery transition

background-color

background-position

background-image

任何的变形transform都能够过渡

过渡动画的触发条件

任何改变CSS的情况,都会触发过渡。比如:hover、加减类、干脆直接设置CSS。

document.getElementById("box").style.width = "300px";

类名的改变会引发过渡动画:

document.getElementById("box").className = "long";

特别注意: transition 不能继承。

关于transition属性的使用方法就这么多了,更多精彩请关注Gxl网其它相关文章!

相关阅读:

CSS3有哪些新增的背景属性

怎么用CSS3媒体查询

css3的弹性盒怎么做出来

下载本文
显示全文
专题