我有以下 CSS 用于为两个单独的元素设置动画:
.loading-icon,
.loading-icon-2{
height: 50px;
position: relative;
left: 50%;
top: 30%;
transform: translateXY(-50%, 50%);
}
.loading-icon {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: spin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
animation: spin 2s linear infinite;
}
.loading-icon-2 {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: anotherspin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
}
.loading-icon div,
.loading-icon-2 div {
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes anotherspin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
唯一的区别是对于 loading-icon-2
类,所有动画属性都是单独指定的,而不是使用速记样式。
但这两个元素的行为不同。有人可以帮助理解为什么会这样,还是我在这里遗漏了什么。 查看此处工作的代码 CodePen .
最佳答案
区别在于您使用的是 transition-timing-function: linear
而不是 animation-timing-function: linear
。但是,当您使用速记时,它会隐含地使用正确的属性名称,使动画看起来连续而没有缓动。
关于当单独指定属性时,CSS 动画的工作方式不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54627835/