🙄

transitionを用いてfont-sizeをアニメーションしようとするとガタガタしちゃう

2023/08/23に公開
.content {
    font-size: 16px;
.content::hover {
    font-size:12px
    transotion: all 1s;
}

このように書くとアニメーションがsmoothではないので,transform:scaleを使うのがいいと思う。

.content {
    font-size: 16px;
.content::hover {
    transform: scale(0.75);
    transition: all 1s;
}

Discussion