[游戏开发]动画、过渡

一、动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1、基本使用

制作动画分为两步：先定义动画，再使用（调用动画）

①用keyframes定义动画

@keyframes 动画名称 {
   0% {
          width：100px;
   }
   100% {
          width: 200px;
   }
}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
• 动画是使元素从一种样式逐渐转变为另一种样式的效果，可以改变任意多的样式任意多的次数
• 请用百分比来规定变化发生的时间，或用关键词“from”和"to"，等同于0%和100%

②元素使用动画

div {
         /*调用动画*/
         animation-name:动画名称;
         /*持续时间*/
         animation-duration:持续时间;
}

?2、动画常见属性

①

②简写：

animation：动画名称 持续时间 动画曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

• 简写属性里面不包括animation-play-state
• 暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction：alternate?

③详解速度曲线

animation-timing-function指定动画将如何完成一个周期。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

注:我们一个元素可以添加多个动画，用逗号隔开（效果类似于一只狗可以先添加动画跑到屏幕中间，然后再添加动画一直在原地跑）

二、过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。（经常和：hover一起搭配使用）

1、语法：

transition：要过渡的属性? ?花费时间? 运动曲线? 何时开始

• 属性：想要变化的CSS属性，比如宽度高度、背景颜色 、内外边距都可以。如果想要写多个属性，利用逗号进行分割；如果想要所有的属性都变化过渡，写一个all就可以
• 花费时间：单位是秒（必须写单位）
• 运动曲线：默认是ease（可以省略）
• 何时开始：单位是秒（必须写单位）可以设置延迟触发时间 ，默认是0s（可以省略）
• 谁做过渡就给谁加