CSS简单动画的制作

transition过渡

简单动画通常称之为“过渡transition”。transition是CSS属性，通常表示为在一定时间内，从一个值变化为另一个值。
transition-property：需要过渡的属性
transition-duration：需要过渡的时间
transition-timing-function：过渡的效果（快、慢）
transition：是transition-property、transition-duration和transition-timing-function属性的缩写
注：并非所有的属性都支持过度，颜色、尺寸、透明度的属性通常都支持过渡效果。

transform变形

属性值：
1、scale 缩放比例
取值：1不变，小于1缩小，大于1放大
2、skew 倾斜
取值：角度+deg 角度可以是正，也可以是负
3、rotate 旋转
rotate+X/Y/Z 以X/Y/Z轴旋转，正值顺时针旋转，负值逆时针旋转

transform-origin 设置旋转的中心点
transform-origin x轴偏移量 y轴偏移量

创建动画和使用动画

创建动画
书写格式：@keyframes 自定义动画名称 {
0% {css代码块}
50% { css代码块}
100% {css代码块}
}
注：如果起始位置和结束位置相同，则可以省略结束位置的设置。
使用动画
书写格式：animation：动画名称 动画时长 动画次数
注：播放次数（数值、infinite无限循环）