过渡效果
过渡效果(transition):使页面变化的更平滑
transition-property:
执行动画对应的属性,例如:color,background等,可以使用all来指定所有属性transition-duration:
过渡动画的持续时间transition-timing-function:
在持续的时间段动画变化的速率,常见的有ease(先慢后快,然后慢速结束)、linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(慢速开始结束)、cubic-bezier(n,n,n,n)(在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值)
transition-delay:
延迟多久后开始动画
动画
- 先定义:@keyframes 动画名 {from/0%{},to/100%{}}
- 再执行:animation
animation-name:
定义动画名称animation--duration:
规定完成动画所需要的时间,以秒或毫秒计animation-timing-function:
规定动画的速度曲线,值有ease(先慢后快,然后慢速结束)、linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(慢速开始结束)、cubic-bezier(n,n,n,n)(在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值)
animation-delay:
动画开始前的延迟animation-iteration-count:
规定动画的播放次数,默认值n
,定义动画播放次数的数值,infinite
规定动画无限次播放animation-direction:
规定是否应该轮流反向播放动画,默认值normal
动画正常播放,alternate
动画轮流反向播放animation-play-start:
running、paused
控制元素的播放状态