通过设置 `-webkit-animation` 属性，实现动画效果。使用 `animation: 'index' 5s ease-in-out 0s 1 alternate forwards;` 命令。理解`forwards`：这确保动画完成时，保持最后的关键帧属性值。使用 `-webkit-keyframes` 定义动画过程：`@-webkit-keyframes 'index'` 开启动画定义。`0%{` 初始状态。
css3 使用animation 只执行一次然后停留在执行后的状态
探讨CSS3中使用animation指令，实现一次执行后停留在特定状态的技巧。
正确运用方法如下：
通过设置 `-webkit-animation` 属性，实现动画效果。
使用 `animation: 'index' 5s ease-in-out 0s 1 alternate forwards;` 命令。
理解`forwards`：这确保动画完成时，保持最后的关键帧属性值。
使用 `-webkit-keyframes` 定义动画过程：
`@-webkit-keyframes 'index'` 开启动画定义。
`0%{` 初始状态。
`left:0%;` 左边位置从0%开始。
`}` 结束初始状态定义。
`50%{` 中间状态。
`left:50%;` 左边位置变至50%。
`}` 结束中间状态定义。
`100%{` 结束状态。
`left:100%;` 左边位置到达100%。
`}` 结束结束状态定义。
`}` 关闭动画定义。2024-10-19
