动画制作2.0#CSS

Hellow大家好！今天我们来学习动画制作

老规矩！先看代码！

div{

width: 100px;

height: 100px;

}

<div><img src="./balloon.png" alt=""></div>

一个朴实无华的气球！

我们给他加一点代码来看看动画效果

  div{

        width: 100px;

        height: 100px;

        animation: donghua 3s linear .5s infinite alternate;

    }

    @keyframes donghua {

        0% {

                width: 100px;

                height: 100px;

            }

            50% {

                width: 200px;

                height: 200px;

                margin-left: 200px;

                margin-top: 300px;

                transform: rotate(40deg);

            }

            100% {

                width: 200px;

                height: 200px;

                margin-left: 600px;

            }

        }

   <div><img src="./balloon.png" alt=""></div>

我们来看看动画效果如何

1649860346235

可以看到气球在来回摆动，这就是动画效果啦

0%-100%是一个动画播放的过程

animation: donghua 3s linear .5s infinite alternate;我们来看这个

donghua是自定义的名字，和 @keyframes复制使用

3s是动画播放时间 liner是动画播放快慢

.5s是播放延迟时间

infinite是无限次播放

alternate偶数次向前播放

学会了没!大家快去试试吧！

 本次的更新就到这里啦，点个关注再走哦！