CSS动画基础

两种CSS动画实现方式

1. 补间动画：分别设置动画始末位置的HTML元素属性，使用transition属性提供在更改元素CSS属性时提供一个过渡。
2. 帧动画：使用Animation属性为HTML元素创建一个动画，再为该动画过程中不同时间点创建不同HTML属性。

两种CSS动画相关属性和规则

transform属性-编辑动画过程

设置transform属性可以平移、旋转、缩放或者倾斜元素。一般使用transform属性为动画设置过程。

transform属性语法

transform: translate(平移距离);
transform: rotate(旋转角度);
transform: scale(缩放比例);
transform: scew(倾斜角度);
/* 实例如下 */
transform: translate(120px, 50%);
transform: rotate(90deg);
transform: scale(1.2);
transform: scew(45deg);
/* 合并写法 */
transform: translate(120px, 50%) rotate(90deg);

transition属性-为HTML元素添加补间动画

在HTML元素上添加transition属性为该元素创建补间动画。

transition属性语法

transition: 动画属性 动画时长 动画过渡方式 动画延迟;
/* 实例如下 */
transition: all 2s linear 1s;

部分transition属性取值

1. 动画属性：all、width、height...
2. 动画过渡方式：ease/ease-in/ease-out/ease-in-out/linear...

animation属性-为HTML元素添加帧动画

在HTML元素上使用animation属性为该元素创建帧动画。

animation属性语法

animation: 动画名 动画时长 动画过渡方式 动画延时 (运动次数) (运动方向) (结束状态) (播放状态);
/* 实例如下 */
animation: AnimationName 3s ease 1s infinite alternate; 

使用@keyframe规则为animation动画创建关键帧

使用@keyframe为animation动画定义关键帧的样式来控制CSS动画序列中的中间步骤。

@keyframes语法

@keyframes 动画名 {
    0%(from) {
        HTML元素属性；
    }
    100%(to) {
        HTML元素属性；
    }
}
/* 实例如下 */
@keyframes AnimationName {
    0% {
        transform: translate(0%);
    }
    100% {
        transform: translate(100%);
    }
}