CSS3 | 您所在的位置:网站首页 › h5翻页过渡效果 › CSS3 |
基本了解
css中实现动画有两种方式:transition过渡动画、 animation自定义动画。 本文主要讲解transition过渡动画的使用,若要了解animation动画请前往animation自定义动话。 在不使用transition时,若通过用户的交互直接改变css样式属性,呈现的形式是立刻转变,但有时我们希望这个变化是有过渡效果的,这时就可应用transition过渡动画了。 我们先来简单了解下transition族属性: 属性含义transition-property指定使用过渡效果的css属性transition-duration设置过渡动画持续时间transition-timing-function设置动画的时间函数。transition-delay设置动画的延迟时间下面详细介绍各个属性👇 transition-propertytransition-property : 用于指定使用过渡效果的css属性,默认值为all。 案例展示: 为了使动画有过渡效果,必须设置过渡时间,这也是过渡动画的基本要素,所以上述具有动画的元素都设置了transition-duration。 注意点 transition-property的默认值 上述案例在触发hover时,我只改变了文字和大小,可实际效果却影响了文字的布局(文字移动),产生的原因就是忽略了transition-property的默认值。 我们已经多次提及了transition-property的默认值,上述代码给.box的伪类::after只添加了一个transition-duration,而没有设置transition-property,所以会应用其默认值all,也就是说:所有能够被transition支持的属性都会有过渡效果。 我们来具体分析一下,为什么会产生变动: .box伪类::after的宽高是继承父级的,由于在触发hover时,父级宽高发生改变,所以伪类宽高也会跟随改变,从而影响了布局。 为了更清晰的看到原因,我们可以为伪类添加一个背景 如果我们只想让文字大小产生过渡效果,只需要明确指定transition-property:font-size即可。 transition不能支持的过渡 上述动画中可发现,文字内容是突变的,当然还有其他transition不支持过渡的选项,也都很好理解: z-index display transition-durationtransition-duration定义动画的过渡时间,默认值为0s,也就是说,如果不设置该属性,默认是没有过渡效果的。 transition-timing-function定义动画事件函数,animation族属性中也有该属性,该属性可以改变动画的执行速率以及轨迹。 其值对应animation-timing-function 值描述linear动画从头到尾的速度是相同的。ease(缓解)默认值:动画以低速开始,然后加快,在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)贝塞尔曲线(自定义数值),可到相关网站可视化设置。案例展示: transition-delay用于设置动画延迟时间,单位为s 下例动画:触发hover于1s后执行,离开元素后也会延时1s再过渡 若我们想要立即触发动画,只在恢复时延迟过渡,该怎么办呢? 我们只需要在动画触发时,重新设置transition-delay: 0s 即可,动画一旦出发就会应用对应的样式表,这时重置延时为0s,动画执行完毕,恢复原来样式,而原来样式表中transition-delay: 1s设置延时为1s,恢复时就会延时1s。 我们只需要在原有代码基础上添加 main:hover .box { …… transition-delay: 0s; }添加之后效果: 当同时使用多个动画时,这个属性使用频率非常高,可依次定义每个动画的延迟执行时间,区分开每个动画。 当然其实也可分别设置每个动画的其它transition族属性,后面会详细介绍多动画累加。 多属性累加 我们知道,当transition-property属性值为all,则所有transition能够支持的属性发生改变时,都会触发过渡效果,但能不能对每个属性的过渡分别进行设置呢? 答案是当然可以,之前介绍的transition族属性都可以设置多个值,各个值之间使用,隔开,从而分别设置各个属性的过渡效果。 值得注意的是:其它transition族属性在设置多个值时,要与transition-property定义的各个属性对应起来,才能准确对目标属性定制过渡效果。 例如: transition-property: width, heitht, color ; trnasition-duration: 1s, 1.5s, 2s ; transition-timing-function: ease, linear, ease-in-out ; transition-delay: 0s, 1s, 0s ;当然,也可使用transition综合属性: 定义顺序分别为: transition-property transition-duration transition-timing-function transition-delay下面代码与上例效果相同 transition: width 1s ease ,heitht 1.5s linear 1s, color 2s ease-in-out ; 最后原创文章,文笔有限,才疏学浅,文中若有不正之处,速速告知。 本文到此结束,希望对你有所帮助,我是 Ashun ,在校大学生,立志成为资深前端工程师,欢迎大家一起交流、学习。后续更新更多文章,请持续关注哦~ |
CopyRight 2018-2019 实验室设备网 版权所有 |