CSS3关键帧动画怎么实现 动画基础和效果有哪些
说起CSS3动画，核心就是得搞定两个大法宝——animation属性和@keyframes关键帧规则。动画其实就是让网页元素动起来，完全不用鼠标操控，那真是超方便！具体来说，animation属性是个复合属性，能控制动画名称、时长、执行方式、循环次数啥的。比如你想让个图标摇摆，可以写个自定义动画名+3秒时间+线性运动曲线+无限循环，根本停不下来！
动画的表现还挺多样的，像stepend动画方式就是让元素一跳到动画末尾状态，简洁直接。如果想玩复杂点，像模拟行走，就得用点高级技巧啦，比如配合JavaScript来管控动画节奏和状态。总之，只要把animation和@keyframes吃透了，你就能做出超级炫酷的动画效果，页面秒变生动有趣！
CSS3动画怎么设置循环和旋转中心 动画延时循环及旋转点的定义
-
动画循环和延迟：想让动画不停地转圈吗？那得用animation-iteration-count设置为infinite，告诉它“咱一直转啊转”。还有个animation-delay，可以设定动画开始前的等待时间，就像倒计时器那样，支持秒和毫秒单位，十分灵活。另外，动画速度怎么变化，靠animation-timing-function来定，有线性、缓入缓出等多种曲线，效果很丰富。
-
绑定动画到元素：直接给选择器设定animation属性，把动画名和时长写上就成啦，简单干净。比如写个动画叫gogogo，元素转个360度，边框颜色还换来换去，看起来酷炫极了。
-
定义旋转中心点：想让图形绕着特定点旋转而不是默认中心？这时候就得用transform-origin属性来调节旋转中心。一般情况下，旋转中心在元素正中间，但你可以把它挪到左上角、右下角甚至外面。举例来说，做个长100px高50px的红色椭圆，加上border-radius变成椭圆形，再用transform:rotate(30deg)来旋转个角度，整活儿时髦极了！
-
保持动画结束状态：动画结束后，元素会回到初始状态很让人蛋疼。别怕，给animation加上forwards参数，一执行完动画就停留在最后一帧。注意如果动画只执行一次，是没法只用CSS搞定的，得借助点JavaScript，把动画结束时的class挂上去，算是小妙招吧。
相关问题解答
-
CSS3动画怎么实现无限循环？
哈哈，这个简单！只要把animation-iteration-count设置成infinite，动画就会嗖嗖嗖一直转个不停，根本停不下来，特别适合让元素动起来吸引眼球。别忘了动画名字和时间也都得写正确哦，这样动画才能顺利启动，漂亮地“无敌循环”！ -
如何设置动画的旋转中心点？
这个超级实用！你用transform-origin属性就行啦，默认旋转中心是元素正中间，但你可以把它调到左边、右边或者随便哪里。这样旋转起来的效果完全不一样，像绕着门轴转或者跳动一样，灵活度极高。记得搭配transform: rotate()来转角度，动感十足！ -
动画结束后怎么保持最后状态，不闪回去？
嗯，这个小问题其实很好解决的。在动画后面加个forwards，比如animation-fill-mode: forwards;，动画结束时元素就会乖乖呆在最后一帧，不会“嗖”一下闪回去。如果动画只播放一次，那还有一种是用JavaScript监听动画结束事件，把最终样式class赋给元素，效果更稳！ -
CSS3动画能做复杂动作吗？比如走路效果？
哇，这个就有点高阶啦！纯CSS动画还是挺强，能搞各种旋转、缩放、移动啥的，但特别复杂的动作，比如仿真走路，纯CSS有点难搞定。这时候就得和JavaScript搭配，控制动画帧率、事件触发，甚至动态改变关键帧，这样才能炫酷又顺滑地还原动作效果，网页动画瞬间升级不少！
新增评论