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偶数次向前播放
学会了没!大家快去试试吧!
本次的更新就到这里啦,点个关注再走哦!