CSS3摆动动画效果
效果图:红包在左右摇晃
代码如下:
@keyframes upAnimation { 0 % { transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1) } 10 % { transform: rotate(-12 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1) } 20 % { transform: rotate(12 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1) } 28 % { transform: rotate(-10 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1) } 36 % { transform: rotate(10 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06) } 42 % { transform: rotate(-8 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06) } 48 % { transform: rotate(8 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06) } 52 % { transform: rotate(-4 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06) } 56 % { transform: rotate(4 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06) } 60 % { transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06) } 100 % { transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1) } }
网站:http://shibowl.top
github:https://github.com/hanbinjxnc
博客园:https://www.cnblogs.com/hool
博客:https://blog.shibowl.top
淘宝店:https://boxunwl.taobao.com/
作者:世博 2019年4月28日
github:https://github.com/hanbinjxnc
博客园:https://www.cnblogs.com/hool
博客:https://blog.shibowl.top
淘宝店:https://boxunwl.taobao.com/
作者:世博 2019年4月28日