1. このページの目的
CSS の Individual transform properties を試します。
Finer grained control over CSS transforms with individual transform properties にあるサンプルを試す。
2. Individual transform properties について
- CSS の animation プロパティを使うのが楽になる。
- translate, scale, rotate をそれぞれ独立して指定できるので、@keyframes が分かりやすく書ける。animation プロパティでの @keyframes を指定も分かりやすくなる。
3. 今までの書き方
以下は Finer grained control over CSS transforms with individual transform properties からの引用である。
CSS
@keyframes anim {
0% { transform: translateX(0%); }
5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
100% { transform: translateX(100%) rotate(360deg); }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
- translate, rotate, scale は常にセットになった書き方しかできない。それぞれが独自のタイミングで変化する動きが記述しにくい。
4. Individual transform properties を使った書き方
以下は Finer grained control over CSS transforms with individual transform properties からの引用である。
CSS
@keyframes move {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
}
@keyframes scale {
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
}
@keyframes rotate {
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: move 2s, scale 2s, rotate 2s;
animation-fill-mode: forwards;
}
- translate, scale, rotate を @keyframws で分けて書けば、それぞれの動きを独立して記述できる。
- translate, scale, rotate のどれかの動きだけなくす場合、animationプロパティからそれだけ消せば済む。
- 逆に、CSSコードを見れば、どんな動きをするのかも分かりやすくなる。