非弹层内解决方式
.logo {
animation: zoom 1.5s infinite;
}
@keyframes zoom {
0%,
20%,
80%,
100% {
transform: scale(1);
}
40%,
50% {
transform: scale(0.9);
}
}
弹层内解决方式
在className后增加 :local
作用域(webpack css module local作用域说明)
:global {
.logo :local {
animation: zoom 2.5s ease-out;
}
@keyframes zoom {
0%,
20%,
80%,
100% {
transform: scale(1);
}
40%,
50% {
transform: scale(0.9);
}
}
}