下面是动画的两种写法 还有一个环形的案例
动画：
第一种写法
@keyframes动画名{
from{ }
to{ }
}
第二种写法
@keyframes动画名{
0%{ }
25%{ }
100%{ }
}
中间还可以加百分比
括号里面写我要实现的动画动作，比如0%{ transform: rotateY(0deg) }
50%{ transform: rotate(90deg)}
100%{ transform: rotate(180deg)}
from~to同理
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 600px;
height: 600px;
margin: 200px auto 0px;
display: flex;
perspective: 1200px;
}
ul{
list-style: none;
width: 133px;
height: 500px;
border: 1px solid red;
position: absolute;
transform-style: preserve-3d;
animation: run 10s linear infinite;
}
img{
display: block;
}
li{
top: 100px;
position: absolute;
}
ul li:nth-child(1){
transform: rotateY(0deg) translateZ(300px);
}
ul li:nth-child(2){
transform: rotateY(45deg) translateZ(300px);
}
ul li:nth-child(3){
transform: rotateY(90deg) translateZ(300px);
}
ul li:nth-child(4){
transform: rotateY(135deg) translateZ(300px);
}
ul li:nth-child(5){
transform: rotateY(180deg) translateZ(300px);
}
ul li:nth-child(6){
transform: rotateY(225deg) translateZ(300px);
}
ul li:nth-child(7){
transform: rotateY(270deg) translateZ(300px);
}
ul li:nth-child(8){
transform: rotateY(315deg) translateZ(300px);
}
ul li:nth-child(9){
transform: rotateY(360deg) translateZ(300px);
}
@keyframes run{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
</style>
<body>
<section>
<ul>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/8.jpg"></li>
<li><img src="images/9.jpg"></li>
<li><img src="images/10.jpg"></li>
<li><img src="images/11.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/7.jpg"></li>
</ul>
</section>
</body>