icon回転振動合体記法
style.css@keyframes icon-rotate-shake {
0% { transform:translate(0, 0) rotate(0deg); }
16.66% { transform:translate(0.13em, -0.13em) rotate(180deg); }
33.32% { transform:translate(0.13em, 0.07em) rotate(360deg); }
49.98% { transform:translate(0, 0) rotate(540deg); }
66.64% { transform:translate(-0.13em, -0.13em) rotate(720deg); }
83.30% { transform:translate(-0.13em, 0.2em) rotate(900deg); }
100% { transform:translate(0, 0) rotate(1080deg); }
}
.deco--.deco-\! img.icon {
animation: 1.0s icon-rotate-shake linear infinite;
}
拡大してもちゃんと揺れて見えるように、pxをemに変換
の環境だと1.3em=19.5px
つまり
3px = 0.2em
2px = 約 0.13em
1px = 約 0.07em