/*
name duration timing-function delay iteration-count direction fill-mode;
name:动画名称
duration:动画时间
timing-function:动画方式
● linear:动画从头到尾的速度是相同的。
● ease:默认。动画以低速开始,然后加快,在结束前变慢
● ease-in:动画以低速开始。
● ease-out:动画以低速结束。
● ease-in-out:动画以低速开始和结束。
delay:延迟时间
iteration-count:次数
direction:方向
*/
.box{
width: 100px;
height: 100px;
background-color: blue;
animation: name duration timing-function delay iteration-count direction fill-mode;
}
/*定义动画*/
@keyframes identifier {
0% {
}
}
热气球例子
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 100%;
height: 300px;
background-color: skyblue;
position: relative;
}
.outer img {
position: absolute;
left: 200px;
top: 50px;
animation: ball 15s infinite linear alternate;
}
@keyframes ball {
0% {
left: 20%;
top: 10px;
transform: rotate(0deg);
}
55% {
left: 65%;
top: 100px;
transform: rotate(-30deg);
}
100% {
left: 88%;
top: 10px;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="outer">
<img src="./images/ball.png" alt="">
</div>
</body>