一.定义

动画是使元素从一种样式逐渐变化为另一种样式的效果 您可以改变任意多的样式任意多的次数 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等 同于 0% 和 100% 0% 是动画的开始，100% 是动画的完成。

二.使用

@keyframes创建动画

使用 @keyframes 规则，你可以创建动画

语法

@keyframes name {
    from|0%{
   css样式
   }
    percent{
   css样式
   }
    to|100%{
   css样式
   }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

animation执行动画

在属性中写：

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

三.实例

切换背景颜色

​

    
    
    
    
    

​

    
切换背景颜色：
    

    
呼吸效果：