前端学习记录17-CSS3动画-(动画定义、调用、动画属性)

animation(动画)

可通过设置多个节点控制一个或一组动画实现复杂动画效果

先定义动画
再调用动画

使用keyframes定义 (类似定义类选择器)
@keyframes 动画名{
   
    0%{
   
    }
    100%{
   
    }
}

调用动画
animation-name:动画名;

持续时间
animation-duration:持续时间;

动画序列

0%是动画开始，100%是动画完成

在@keyframes中定义某项css样式 就能创建由当前样式逐渐改变新样式的动画效果

动画是从一种样式向另一种样式的变化，可以改变任意次数

使用百分比来规定样式变化时间 或用 from和 to 等同于0%和100%

动画属性

属性	属性值	说明
@keyframes		规定动画
animation	动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态	所有动画属性的简写，除了animation-play-state属性
animation-name	动画名	必要属性
animation-duration	时间	持续时间 默认为0 必要属性 不能设置为0 要不然你加动画效果干啥呢
animation-timing-function	lin