散装web前端技术
1.transition
transition两个时间,一个时长,一个延时,正负值都可;
transition-delay负值过渡的效果,过渡效果立即开始,开始位置是过渡动画中的某个位置;
拆分过渡,合并过渡;
模拟长按效果 监听元素触摸事件touchstart和touchend添加动画类,再监听动画事件'transitionEnd'事件;
2.animation
拆分动画,合并动画;
animation-direction——reverse:反向运行动画,每周期结束动画由尾到头运行;
alternate:动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向;应用:钟摆运动;
transition两个时间,一个时长,一个延时,正负值都可;
transition-delay负值过渡的效果,过渡效果立即开始,开始位置是过渡动画中的某个位置;
拆分过渡,合并过渡;
模拟长按效果 监听元素触摸事件touchstart和touchend添加动画类,再监听动画事件'transitionEnd'事件;
2.animation
拆分动画,合并动画;
animation-direction——reverse:反向运行动画,每周期结束动画由尾到头运行;
alternate:动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向;应用:钟摆运动;
alternate-reverse:反向交替,反向开始交替。动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从 1 开始。animation-iteration-count:播放次数,可以是小数;animation-play-state:设置动画暂停;
1.scroll-snap
2.scroll-behavior:smoth
3.overscroll-behavior
4.overflow-anchor5.scrollbar-color,scrollbar-width,scrollbar-gutter
1.user-select all
2.user-drag
3.user-modify