css 动画 @keyframes

最新推荐文章于 2024-11-13 10:14:11 发布

blogscsdn

最新推荐文章于 2024-11-13 10:14:11 发布

阅读量538

点赞数

本文链接：https://blog.youkuaiyun.com/blogscsdn/article/details/52218174

版权

本文介绍了一个具体的CSS动画案例，详细展示了如何使用@-webkit-keyframes定义动画效果，通过调整元素的外边距来实现动态变化的过程。动画周期中不同百分比阶段的变化被精确设置，以达到预期的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画命名：

-webkit-animation:slide1 3s ease-out infinite;

创建动画是通过逐步改变从一个CSS样式设定到另一个。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

<span style="font-size:18px;">@-webkit-keyframes slide1 {
  0% { margin-left:0;}
  23% { margin-left:0;}
  33% { margin-left:-600px;}
  56% { margin-left:-600px;}
  66% { margin-left:-1200px;}
  90% { margin-left:-1200px;}
  100% {margin-left:0;}
}</span>