NetCommons内でアニメーションを設定する際の自分用のメモです。
　CSSの変形プロパティ，動画にも設定できるのはすごいなぁ。画面内にたくさん設定しても遅くならないみたいだし。
　ただ，実際に試したところ，animation ，transitionの一括設定は編集後に削除されてしまうことがあるようなので，それぞれ個別に設定した方がよさそうです。また，１つのstyleタグの中に複数の@keyframesを並べて書くと機能しないことがあるようです。そういうときは，@keyframesを１つ１つ<style></style>で囲むとちゃんと動きます。

移動	transform: translate(dx, dy); transform: translateX(dx); transform: translateY(dy); transform: translateZ(dz); transform: translate3d(dx, dy, dz);
伸縮	transform: scale(sx, sy); transform: scaleX(sx); transform: scaleY(sy); transform: scaleZ(sx); transform: scale3d(sx, sy, sz);
回転	transform: rotate(r); transform: rotateX(rx); transform: rotateY(ry); transform: rotateZ(rz); transform: rotate3d(vx, vy, vz, r);
傾斜	transform: skew(ax, ay); transform: skewX(ax); transform: skewY(ay);

プロパティ	既定値	値の例
animation	none 0  ease 0 1 nomal	NetCommonsで使うと編集後に消えてしまうことがあるようなので，個別に設定した方がよさそう。。
animation-name	none
animation-duration	0	1s~
animation-timing-function	ease	ease, linear, ease-in, ease-out, ease-in-out,cubic-bezier(x1, y1, x2, y2)
animation-delay	0	1s~
animation-iteration-count	1	0~, infinite
animation-direction	normal	normal, alternate

プロパティ	既定値	値の例
transition	none 0 ease 0	NetCommonsで使うと編集後に消えてしまうことがあるようなので，個別に設定した方がよさそう。
transition-property	all	all, none
transition-duration	0	1s~
transition-timing-function	ease	ease, linear, ease-in, ease-out, ease-in-out,cubic-bezier(x1, y1, x2, y2)
transition-delay	0	1s~

　上の表の中で動いているイラスト（mp4動画）の，実際のコードです。