问题描述:
多个div设置不同效果的关键帧 @keyframes后,显示的效果却是一样的
非理想效果:
错误代码(精简版):
.pointer1 {
animation: pointermove 3s;
@keyframes pointermove {
from {
transform: rotate(300deg);
}
to {
transform: rotate(300deg+10deg);
}
}
}
.pointer2 {
animation: pointermove 3s;
@keyframes pointermove {
from {
transform: rotate(300deg);
}
to {
transform: rotate(300deg+300deg);
}
}
}
原因:
@keyframes命名重复,一个keyframes设置后属于全局的效果,此处不仅没有重新命名,每个animation还引用了同样的关键帧@keyframes
解决:
为不同的@keyframes设置不同的名字,animation应引用不同的关键帧
最终效果: