-
触发式动画
常用触发动作
1:鼠标悬浮 ( :hover)
2:选项选中( :checked)
3:输入框点击( :active) -
触发式过度
时间参数 transition-duration
延迟执行 transition-delay
过度动画时间函数 transition-timing-function:linear 匀速
ease 慢-快-慢
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束
贝赛尔曲线参数
过渡动画属性 transition-property:执行过渡属性;复合写法:
transition: property duration timing-function delay -
主动式动画
主动式动画:由用户自行创造关键帧,无需任何的动作触发
创造方式为:
@keyframes 动画名称 {
0% {
样式名称:样式值;
}
100% {
样式名称:样式值;
}
}
动画激活:给需要展示用户自行创造的主动式动画的元素加上animation-name(动画-名称)样式主动式动画名称:animation-name 主动式动画事件:animation-duration 主动式动画时间函数:animation-timing-function 主动式动画时间延迟:animation-delay 主动式动画播放次数:animation-iteration-count:默认是 1 infinite 无限循环 多次播放动画是的正反方向: animation-direction:normal 默认,每一次都是正向播放 alternate 动画在奇数次正向播放,在偶数次反向播放 reverse 每一次都是反向播放 alternate-reverse 动画在奇数次反向播放,在偶数次正向播放 动画播放完成之后的状态: animation-fill-mode:forwards 默认,保留最后一帧的状态 backwards 第一帧的状态 动画运行状态 : animation-play-state: running 默认,一直播放 paused 停止 复合写法: animation: name duration timing-function delay iteration-count direction fill-mode;
动画样式
最新推荐文章于 2022-05-01 11:06:53 发布