css动画使用步骤: 1. 定义动画关键帧 2. 在选择器中通过animation属性使用动画关键帧 定义动画关键帧: 语法: @keyframes 名字{ 0%{ 样式效果 } .... 100%{ 样式效果 } } animation属性的参数要求: 参数1: 设置需要使用的动画关键帧, 必填. 参数2: 设置动画执行的时间长度, 必填. 单位s 参数3: 设置速度曲线, 选填. 默认ease, 常用linear 参数4: 设置动画执行完毕后停留在哪里, 选填. 默认回到第一帧, forwards停留在最后一帧 注: 只有动画执行次数有限情况在有必要设置此参数 参数5: 设置动画执行的次数, 选填. 默认1次, 常用infinite(无限次) 参数6: 设置动画执行的方向, 选填. 默认从0%-100%, 常用alternate(轮流) 参数7: 设置动画延迟, 选填. 默认0, 单位s 示例:匀速移动无限次 动画关键帧: @keyframes view3 { 0%{ left: 0; } 50%{ left: 45vw; } 100%{ left: 95vw; } } .box6{ width: 5vw; height: 5vw; position: absolute; background-color: green; animation: view3 6s linear forwards infinite; }
css动画效果
最新推荐文章于 2023-05-31 16:11:15 发布