H5动画

最新推荐文章于 2024-02-15 09:15:57 发布

qq_44388958

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_44388958/article/details/89817718

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img{
            width: 150px;
            animation: plane 7s ease-in-out infinite ;

        }
        @keyframes plane {
            0%{
                transform:translate(0px,0px);
            }
            20%{
                transform: translate(200px,300px) skewY(20deg);
            }
            40%{
                transform: translate(400px,0px) skewY(-10deg);
            }
            60%{
                transform: translate(600px,300px) skewY(20deg);
            }
            80%{
                transform: translate(800px,0px)skewY(-10deg);
            }
            100%{
                transform: translate(1000px,300px) skewY(20deg);

            }

        }
    </style>
    <title></title>
</head>
<body>
<img src="../../img/plane.jpg" alt=""/>
</body>
</html>
<!--CSS动画
    @keyframes:定义一个动画
    animation:在HTML元素上应用动画-->
<!--定义动画
    @keyframes 动画名称{
       阶段1{CSS样式}
       阶段2{CSS样式}
       阶段3{CSS样式}
       ..... }
  阶段：每个阶段-->

<!--CSS动画：
    animation-name:动画名称    ***必须指定
    animation-Duration:动画持续时间   ***必须指定
    animation-timing-function:动画速度曲线
    animation-delay:动画开始的时间，延迟
    animation-iteration-count:动画播放次数，默认为1.
                       N：播放次数。
                       infinite:无限次循环。
    animation-direction:动画在下一个是否逆向播放，默认为normal.

    anition-state:
    animation-fill-mode:规定对象动画时间之外的状态
                       none:不改变默认行为
                       forwards:在动画完成后，保持最后的CSS样式
                       backwards:在动画完成后，回到最初的CSS样式
                       both:向前和向后填充的样式都被应用-->