html基础入门----简单动画

1.实现步骤：

（1）定义动画

（2）执行动画

（1）定义动画

方式一：

@keyframes 动画名{
    form{开始状态}
    to{结束状态}
}

该方式没有中间状态

方式二：

@keyframes 动画名{
    0%{开始状态}
    *%{中间状态}
    100%{结束状态}
}

（2）执行动画

animation： 动画名  执行时间  延迟时间  次数  曲线  执行方向；

次数无数次：infinite

运动曲线匀速：linear

执行方向从form到to,再从to到from：alternate

注意：如果有多个动画执行，用逗号隔开

 示例：

圆的缩放