CSS_html/css_WEB-ITnose の微妙に曖昧なプロパティ

フロントエンド開発では、すぐには理解できない CSS 属性に遭遇することがよくあります。そのため、これらの微妙で曖昧な属性をすべてここで将来的にまとめたいと考えています。

animation-fillmode 属性値の "both"
mdn または w3school ドキュメントで誰がこの属性を説明したかに関係なく、css3 アニメーションの anime-fillmode の "both" 属性:

アニメーションはは、前方と後方の両方のルールに従います。

したがって、アニメーションのプロパティが両方向に拡張されます。

このような説明を聞くと、人々は頭を悩ませます。本当の知識は実践から得られ、知るためには試してみなければなりません。

デモで話す:

再生回数が1でfillmodeが両方ある場合のアニメーションの滞在状態
再生回数が1でfillmodeが設定されていない場合のアニメーションの滞在状態

CSSコードを添付します:

#box{  width:100px;  height:100px;  background:black;/* 在此设置有没有both以及播放次数的对比 */  -webkit-animation: move 1s ease 1 alternate both;  animation:move 1s ease 1 alternate both ;  }@-webkit-keyframes move{  100%{    -webkit-transform:translate3d(150px,0,0);    transform:translate3d(150px,0,0);     -ms-transform: translate3d(150px,0,0);}}

から知ることができますアニメーションの方向 (animation-direction) とアニメーションの再生回数 (animation-iteration-count) の両方に属性が関連付けられているデモ。方向が交互に設定され、回数が奇数の場合、アニメーションの滞在状態は終了状態(順方向)、逆に偶数回は初期状態(逆方向)になります。