[游戏开发]前端学习日志0922

CSS动画与过渡效果

?1.transition

这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的：hover，focus，checked，媒体查询或者JavaScript。

语法：transition: property（名称） duration（完成过渡效果需要多少时间） timing-function（速度效果的速度曲线） delay（动画延迟时间）;

transition有着以下几个不足：
1需要事件触发，所以没法在网页加载时自动发生
2是一次性的，不能重复发生，除非一再触发
3只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
4一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
?

2.animation?

animation是弥补transition的不足，可以叠加多个动画，做出更丰富的动画效果。

语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;

?