css动画-animation:动画名称 动画时长 速度曲线 延迟时间 循环次数 动画方向 执行完毕时的状态

步骤一:定义动画

@keyframes 动画名称{
from{}
to{}
}

百分比定义:百分比指的是动画总时长的占比
@keyframes 动画名称{
0%{}
50%{}
100%{}
}

步骤二:使用动画

animation:动画名称 动画时长 速度曲线(steps(5) 延迟时间 循环次数(infinite 表示无限循环) 动画方向(alternate表示可以反方向执行) 执行完毕时的状态(forwards表示结束时的状态)
css动画-animation:动画名称 动画时长 速度曲线 延迟时间 循环次数 动画方向 执行完毕时的状态_第1张图片

代码一:




    
    
    
    动画实现步骤
    


    
"box">

代码二:




    
    
    
    animation复合属性
    


    
"box">

你可能感兴趣的:(前端,css,动画,css3)