animation:动画

最新推荐文章于 2022-02-17 15:53:07 发布

&XYZ&

最新推荐文章于 2022-02-17 15:53:07 发布

阅读量1.8k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/104663277

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>回忆录</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div></div>
</body>
<script>
</script>

</html>

* {
    margin: 0;
    padding: 0;
}

div {
    width: 100px;
    height: 100px;
    background-color: #6666FF;
    position: absolute;
    /* animation: run 3s, color-change 3s; */
    /*注意:可以将多个关键帧写在一起*/
    animation: run 3s ease-in 1s 1 normal both;
    /*
    第一个值run：代表动画的名称
    第二个值3s：代表执行完动画需要花费多久的时间
    第三个值ease-in：代表运动的速度（每一段的）（默认值==ease：平滑过渡）
    第四个值1s：代表运动前延迟的时间（默认值==0）
    第五个值1：代表运动几次（infinite：无线循环）
    第六个值normal：代表运动方向（默认值==normal）
    第七个值backwards：代表运动的状态
        （默认值==none,
        backwards运动开始前的状态为#6666FF，结束后也为#6666FF）
        forwards运动结束前最后一帧的状态为#ff0000，结束后也为#ff0000）
    */
}

div:hover {
    animation-play-state: paused;
    /*停止运动：兼容性不好，不推荐使用*/
}

@keyframes run {
    0% {
        /*注意：0% == from */
        left: 0;
        top: 0;
        background-color: #ff0000;
    }
    25% {
        left: 200px;
        top: 0;
        background-color: #ff0000;
    }
    50% {
        left: 200px;
        top: 200px;
        background-color: #ff0000;
    }
    75% {
        left: 0;
        top: 200px;
        background-color: #ff0000;
    }
    100% {
        /* 100% == to */
        left: 0;
        top: 0;
        background-color: #ff0000;
    }
}

/*
举例子：0% == from 100% == to ,run与run1效果一样的。
    @keyframes run1{
        from{ 
            left: 0;
            top: 0;
        }
        25%{
            left: 200px;
            top:0;
        }
        50%{
            left: 200px;
            top:200px;
        }
        75%{
            left: 0;
            top:200px;
        }
        to{ 
            left: 0;
            top:0;
        }
    }
*/

/*一边移动一边改变颜色：*/

@keyframes color-change {
    from {
        /* left: 0;
        top: 0; */
        background-color: #ff0000;
    }
    25% {
        /* left: 200px;
        top:0; */
        background-color: #FFFF00;
    }
    50% {
        /* left: 200px;
        top:200px; */
        background-color: #0000ff;
    }
    75% {
        /* left: 0;
        top:200px; */
        background-color: #00FF00;
    }
    to {
        /* left: 0;
        top:0; */
        background-color: #000000;
    }
}

/*
    关键帧存在兼容性问题，为了解决这个问题，
    是使用关键帧时一定要加进行兼容性处理。
    @keyframes run {
        0% {
            left: 0;
            top: 0;
        }
        25% {
            left: 200px;
            top: 0;
        }
        50% {
            left: 200px;
            top: 200px;
        }
        75% {
            left: 0;
            top: 200px;
        }
        100% {
            left: 0;
            top: 0;
        }
    }

     @-webkit-keyframes run {
        0% {
            left: 0;
            top: 0;
        }
        25% {
            left: 200px;
            top: 0;
        }
        50% {
            left: 200px;
            top: 200px;
        }
        75% {
            left: 0;
            top: 200px;
        }
        100% {
            left: 0;
            top: 0;
        }
    }

     @-moz-keyframes run {
        0% {
            left: 0;
            top: 0;
        }
        25% {
            left: 200px;
            top: 0;
        }
        50% {
            left: 200px;
            top: 200px;
        }
        75% {
            left: 0;
            top: 200px;
        }
        100% {
            left: 0;
            top: 0;
        }
    }
*/

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animation:动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
复制链接

扫一扫