css3 动画相关
Published by powerfulyang on Nov 23, 2021
animation-timing-function
有如下可选值:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* Steps Function keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* Multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: revert; animation-timing-function: unset;
steps()
Relate to 张鑫旭的 blog
可以用于实现不连续的动画
Relate to stackoverflow
prefers-reduced-motion
媒体查询 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。
1 2 3 4 5 6 7 8 9
.animation { animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } }