多个动画与时间配置

小仓桑

已于 2023-01-08 21:17:02 修改

阅读量93

点赞数

分类专栏： CSS动画文章标签： css css3 Powered by 金山文档

于 2023-01-08 20:47:11 首次发布

本文链接：https://blog.csdn.net/qq_43462019/article/details/128605436

版权

CSS动画专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html代码

<div class="main">
 <div class="mains"></div>
</div>

css代码

* {
    margin: 0;
    padding: 0;
}

body {
    /*设置body的宽高以及背景颜色*/
    width: 100vw;
    height: 100vh;
    background-color: #34495e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    /*建立一个大方框*/
    height: 400px;
    width: 400px;
    border: solid 1px #ddd;
}

.mains {
    /*建立一个小方块*/
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    /*动画名字（自定义）*/
    animation-name: translate, background;
    /*动画持续的时间*/
    animation-duration: 4s, 2s;
    /*一直执行动画*/
    animation-iteration-count: infinite;
}

@keyframes translate {
    /*25%的时候向X轴移动300像素*/
    25% {
        transform: translateX(300px);
    }
    /*50%的时候向X轴和Y轴移动300像素*/
    50% {
        transform: translate(300px, 300px);
    }
    /*25%的时候向Y轴移动300像素*/
    75% {
        transform: translateY(300px);
    }
}

@keyframes background {
    /*25%的时候改变背景颜色*/
    25% {
        background-color: darkcyan;
    }
    /*50%的时候改变背景颜色*/
    50% {
        background-color: springgreen;
    }
    /*25%的时候改变背景颜色*/
    75% {
        background-color: darkmagenta;
    }
}