Css动画运动过程和调用

最新推荐文章于 2025-05-28 16:06:45 发布

zhanghl150426

最新推荐文章于 2025-05-28 16:06:45 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

分类专栏：典型小案例 css 文章标签： Css动画运动过程和调用

本文链接：https://blog.youkuaiyun.com/zhanghl150426/article/details/82149254

典型小案例同时被 2 个专栏收录

13 篇文章

订阅专栏

css

3 篇文章

订阅专栏

此博客展示了CSS动画的运动过程与调用方法。通过定义`@-webkit-keyframes`来设定动画关键帧，如改变元素的`margin-left`值。之后在元素样式中调用该动画，设置动画时长、计时函数和迭代次数等，实现元素的动画效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{padding:0;margin:0;}
       .box{
           width:100px;
           height:100px;
           background:red;
       }
       /*先定义*/
       @-webkit-keyframes changeWidth{
           0%{
               /*width:100px;*/
               margin-left:0;
           }
           50%{
               margin-left:500px;
           }
           100%{
               /*width:400px;*/
               margin-left:200px;
           }
       }
       /*后调用*/
       .box{
           -webkit-animation-name:changeWidth;
           -webkit-animation-duration:1s;
           -webkit-animation-timing-function:linear;
           -webkit-animation-iteration-count:infinite;
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>