CSS 笔记 (3)- 过渡、动画

原创 乘风逐月 随笔 CSS知识记录 307阅读 2018-07-25 09:22:53 举报
一、transition 属性

transition 属性是一个简写属性,用于设置四个过渡属性,使得CSS的属性值在一段时间内平滑过渡
语法:transition: transition-property transition-duration transition-timing-function transition-delay;

描述
transition-property规定设置过渡效果的 css 属性的名称,例如:颜色属性,转换属性,渐变属性,visibility属性,阴影,取值为数值的属性
transition-duration规定完成过渡效果需要多少秒或毫秒
transition-timing-function规定速度效果的速度曲线,不设置默认为0,则不会产生过渡效果。
transition-delay定义过渡效果延时开始时间,单位为秒或毫秒

transition-timing-function 的取值有:

描述
ease默认值,慢速开始,快速变快,慢速结束
linear匀速
ease-in慢速开始,加速效果
ease-out快速开始,减速效果
ease-in-out慢速开始和结束,先加速后减速

示例:

二、动画

使用动画的步骤:
a. 声明动画-创建一个动画并指定名称,通过 @keyframes 关键词声明动画的关键帧
b. 为元素调用动画-动画名称、播放时间、播放次数、播放方向

1.声明动画

@keyframes 关键词声明动画的关键帧。帧是动画的每个时间点的动作。
语法:

2.animation 属性

animation 属性是一个简写属性,用于设置六个动画属性。
语法:animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

描述
animation-name规定需要绑定到元素的动画名称
animation-duration规定完成动画所需要的时节,以秒或毫秒计
animation-timing-function规定动画的速度曲线,取值和过渡的相同
animation-delay规定动画开始的延时时间,单位为秒或毫秒
animation-iteration-count规定动画的播放次数,取值为:具体数值 或 infinite(无限次播放)
animation-direction规定动画的播放方向,取值有:normal-默认值,正向播放0%~100%;reverse-逆向播放,100%~0%,alternate-轮流播放,奇数次,正向播放,偶数次,逆向播放
3.animation-fill-mode

动画在播放前或播放后的状态是什么样。
取值:
----none: 不改变默认行为
----forwards: 动画完成后,状态保持在最后一帧上
----backwards: 动画完成后,状态保持在第一帧上
----both: 播放前后,分别在第一帧和最后一帧上

4.animation-paly-state

指定动画运行还是暂停。
取值:
----paused: 动画暂停
----running: 动画播放
示例过渡:

示例动画:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复