是什么

css动画：html元素从一个样式逐渐过渡成另外一个样式的过程

创建方式

• transition: 渐变动画
• transform: 转变动画
• animation: 自定义动画

transition

transition: property(属性) duration（时长） timing-function（效果的速度曲线） delay（延迟）

transition: all 2s ease-in 500ms;

transform

• translate 位移
• skew 倾斜
• rotate 旋转
• scale 缩放

transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px)

animation

• 定义动画@keyframes

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

• animation调用 animation: name duration timing-function delay iteration-count direction;

animation: rotate 2s

区别

• transition 简单动画 - 一般
• transform 变形动画 - 一般
• animation 自定义动画 - 强大