//count down from 5 to 1, a useful animation. show the code to you:
<!DOCTYPE html>
<html>
<style>
#contain {
width: 400px;
height: 300px;
overflow: hidden;
}
#pic {
height: 1200px;
animation: switch 5s ease-out infinite;
}
#pic > img {
float: top;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 20% {
margin-top: 0;
}
20%, 40% {
margin-top: -300px;
}
40%, 60% {
margin-top: -600px;
}
60%, 80% {
margin-top: -900px;
}
80%, 100% {
margin-top: -1200px;
}
}
</style>
<body>
?<div id="contain">
???<div id="pic">
???????<img src="5.png" />
???????<img src="4.png" />
<img src="3.png" />
<img src="2.png" />
<img src="1.png" />
???</div>
</div>
</body>
</html>
倒计时5，4，3，2，1css实现(count down ?from 5 to 1 using css)
原文地址：https://www.cnblogs.com/begin256/p/9864550.html