本文介绍了CSS3中的动画Animations和变形Transform。Animations通过keyframes定义元素随时间改变CSS属性，包括动画序列和过渡效果。Transitions则提供了一种平滑过渡不同CSS属性的方法，需要触发事件才能执行。Transform允许对元素进行各种变形操作，并可以设置变形原点。最后，文章对比了animation和transition的区别，前者能控制更多属性和中间状态，且能重复执行。
CSS动画-Animations
由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。
Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何JavaScript技术即可完成动画的制作。
动画序列（animationsequence）
通过@keyframes（css3中属性）来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
1.定义动画轨迹 @keyframes +轨迹名称 定义在style{}中
有两种方法，第一种直接定义开始和结束动画轨迹
第二种是对轨迹进行设置 10%、30%....
最低0.47元/天 解锁文章
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
