用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
transition通过事件来触发动画效果,所以它本身就存在很多局限性。如果我希望动画效果能够自动执行怎么办?这就需要 用到css3的另一个重要 的属性——animation <br/> ### 关键帧 说到animation就不得不说一下关键帧(keyframes),它指定了动画在不同时间段的样式。 ~~~ @keyframes around{ 0%{transform:translateX(0);} 25%{transform:translateX(180px);} 50%{transform:translate(180px,180px);} 75%{transform:translate(0,180px);} 100%{transform:translateY(0)} } ~~~ 上述代码创建了一个名字为around的关键帧,它指定了动画(时间)在 0%,25%,50%,75%,100%的位置分别为左上,右上,右下,左下,左上(假设div的宽高为180px)。 <br> ### animation #### 调用动画——animation:关键帧的动画名称 #### animation-duration:设置动画完成时间 单位:秒或毫秒 <br> #### animation-timing-function:过渡函数 参数同transition-timing-function <br> #### animation-delay:延迟时间 单位:秒或毫秒 <br> #### animation-iteraction-count:指定动画的播放次数(默认播放一次) 1.n:播放n次 2.infinite:播放无限次 <br> #### animation-direction:指定播放方向 1.normal:默认值,每次循环都是正序播放 2.alternate:偶数次循环使反方向播放 <br> #### animation-fill-mode:指定动画的开始、结束样式 1.none:默认动画结束后返回到0%帧的样式 2.forwards:动画结束后停留在最后的帧的样式 3.backwards:在准备执行动画之前让元素迅速应用动画初始帧的样式 (比如元素透明度为1,0%的样式为透明度为0,在开始动画之前元素的透明度已经是0了,否则就会出现先变为0后开始执行动画的情况) 4.both:forwards+backwards <br/> animation的前四个属性是必须的。 也可以把这些属性写到一起 ~~~ div span{ display:inline-block; width:20px; height:20px; background:red; border-radius:10px; animation:around 10s ease 1s infinite backwards; } ~~~ 最终的动画效果:小球从左上角由快到慢到达右上角,再由快到慢到达右下角,再由快到慢到达左下角,最后回到原点并且一直循环下去。 过渡函数会作用的每一帧上,也就是每一帧到达下一帧的动画都是由快到慢。 <br/> animation和@keyframes也要写css hack,关键帧的前缀写在@和keyframes之间:@-webkit-keyframes{...}