css怎么做简单动画

CSS是前端开发中必不可少的一部分，它不仅可以美化网页，还可以制作简单的动画效果，下面我就来介绍一下CSS如何制作简单动画。

/* 基本动画 */div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: example;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
}
@keyframes example {
    from {
            transform: rotate(0deg);
    }
    to {
            transform: rotate(360deg);
    }
}

以上代码制作了一个基本动画，div元素沿着圆形运动，循环不断。其中，animation-name定义了动画名称，@keyframes定义了动画执行过程，from表示动画开始状态，to表示动画结束状态。

/* 关键帧 */div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
        animation-duration: 2s;
        animation-fill-mode: forwards;
}
@keyframes example {
    0% {
            background-color: red;
            left: 0;
    }
    50% {
            background-color: yellow;
            left: 200px;
    }
    100% {
            background-color: green;
            left: 400px;
    }
}

以上代码定义了一个关键帧动画，div元素在动画执行过程中会先变成黄色，再变成绿色，同时向右移动。animation-fill-mode定义了动画完成后保留最后一个动画状态。

/* 循环动画 */div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
        animation-duration: 2s;
        animation-iteration-count: infinite;
}
@keyframes example {
    0% {
            left: 0;
    }
    50% {
            left: 200px;
    }
    100% {
            left: 0;
    }
}
    

以上代码定义了一个循环动画，div元素会来回移动。animation-iteration-count定义了动画循环次数。

通过这三种方法，我们可以制作出各种各样的动画效果，提升网页的交互性和视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！