cssのtransitionを無効にしたい

Question

スマホでは、transitionを実行して、画面が500px以上だと、transitionを取り消したいと思っています。
その場合、どうすればいいのでしょうか。
transitionの初期値がnoneなので、transition:none;とでもすればいいのでしょうか。

それと、transitionの後の数字ですが、.3sは、0.3sのことでしょうか。
opacityでも、.5みたいなのがありました。これも0.5のことでしょうか。

.hoge{
　transition: .3s ease-in-out;
　transform: translateX(-105%);
}

@media screen and (min-width:500px) {
 .hoge{
　ここの書き方
　}
}

Answer 1

この500px以上で取り消したいのはtransition（変形の変化方法定義）で間違いないでしょうか。
もしそうであれば

@media screen and (min-width:500px) {
 .hoge{
    transition: unset;
　}
}

で大丈夫かと思います。

ただ、大体の場合はtransform（変形効果）の方を取り消したい…というパターンが多いので、もし、変形すること自体（この場合はX方向に-105%）を取り消したい場合は

@media screen and (min-width:500px) {
 .hoge{
    transform: none;
　}
}

になります。

因みに、CSSでは省略表記が許可されていますので
.3sは0.3sの事です。小数点以下の指定の場合、1の位が0であれば省略可能です。

Comments

[d_neko]

ありがとうございます。transition自体よくわかっていなかったので助かりました。「CSSでは省略表記が許可」たぶん、そうだと思って探した（1時間ぐらい）のですが、それを書いているところが見つかりませんでした。0一個省略したくらいでは何も変わらないと思うので、こんな省略はなくしてほしいと思いました。

[45_Shingo]

表記も似ているのでちょっと混乱しますよね

transitionはある状態から別の状態に変化（アニメーション）する方法の定義なので、ぶっちゃけメディアクエリでオフにしなくてもあまり影響はないです。
ただ、transformはオブジェクトの変形なので、noneを指定して任意で切らないととんでもないことになったりします。

ショートハンドや省略表記は多分タイピングを少なくしたり、一覧性をよくするために定義されているんですが、おっしゃるとおり0が1つ減ったからってそう変わらなさそうですｗ

[d_neko]

＞表記も似ているのでちょっと混乱しますよね
混乱していました。というより、transitionとtransformの2つあるのに、今の今まで気づきませんでした。
テストしてみて、「あれ～無効にならないな～」とやっていて、たった今、2つあるがわかりました。

[45_Shingo]

良かったです。
僕も初期のころ「あれ？どっちが？どっち？」ってなってたので。よくわかります

Answer 2

animation-play-state: paused; で停止できます。
CSSは0.5のような1未満の小数点の0は.5のように省略可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-play-state

Comments

[d_neko]

ありがとうございます。「animation-play-state: paused;」こんなものが、存在するのしら知りませんでした。今から勉強します
「.5のように省略可能です。」これって、0の一文字を省略することにどんなメリットがあるのでしょうか。