当前位置: 首页 > Web前端 > HTML5

css动画常用动画效果

时间:2023-04-05 22:17:38 HTML5

最近项目需要写一些动画效果,然后巩固一下动画方面的知识。animationanimation-name需要绑定到选择器的关键帧的名称animation-duration动画完成所花费的时间animation-delay设置延长时间animation-timing-function动画的运动速度linear的速度动画从头到尾都是一样的。轻松是默认值。动画以低速开始,加速,然后减速结束。ease-in动画以较慢的速度开始。ease-out动画以较慢的速度结束。缓入缓出动画以缓慢的速度开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier函数中拥有自己的值。可能的值是从0到1的数值。animation-iteration-count动画播放的次数infinite指定动画应该播放无限次。animation-direction反向播放动画,依次正常默认值。动画应该可以正常播放。alternate动画应该反向交替播放。---好吧,让我们就此打住。有问题可以自行查找1.animation1

2.animation23.animation3样式>.spinner{宽度:60px;高度:60px;位置:相对;margin:100pxauto;}.double-bounce1,.double-bounce2{宽度:100%;高度:100%;边界半径:50%;背景色:#67CF22;不透明度:0.6;位置:绝对;顶部:0;左:0;-webkit动画:弹跳2.0s无限缓入缓出;动画:弹跳2.0s无限缓入缓出;}.double-bounce2{-webkit-animation-delay:-1.0s;动画延迟:-1.0s;}@-webkit-keyframes弹跳{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframesbounce{0%,100%{transform:scale(0.0);-webkit-转换:规模(0.0);}50%{变换:缩放(1.0);-webkit-转换:规模(1.0);}}4.animation45.animation5