animation効果をレスポンシブ時にある画像サイズ以下はanimation効果解除・停止する方法【サンプルコードあり】

CSSで、animation効果と使って動きをつけてる場合。
スマホ画面の（一定の画面幅以下）の場合は
animation効果を解除したい場合。

その方法調べたがあまり情報が見つからなかったので
記事に残します。
今回調べてみて、JavaScriptを使う方法と、CSSで完了
出来る方法の２つがあるみたいとわかった。

この記事では、CSSのみで出来る方法をかいてます。

animation効果を解除する方法
フリーランス案件

animation効果を解除する方法

animation効果を設定してる、プロパティ指定で出来ます。

今回書いたコード

@media screen and (max-width: 1000px) {
.image{
animation: none;
transform: none;
transition: unset;
opacity: 1;
　}
}

@media screen and (max-width: 1000px) {

.image{

animation: none;

transform: none;

transition: unset;

opacity: 1;

　}

これで、imageクラスに設定してるanimation効果を解除されました。
一番下のopacity: 1;は、animation効果を設定した時に
最初に画像が表示されないようにopacity: 0;に設定してるため。
その非表示設定もここで一緒に解除してます。

今回実際に設定したコード

このコードは、ページを開いたら右から画像が現れて、
画面の右側80％位の場所に表示される設定です。

画面サイズが1000px以下の場合は、画像が画面の真ん中に
表示されるように設定変更してます。

書いたコード
ＨＴＭＬ

<body>
<div class="image">
<img src="./imgs/as.png" alt="">
</div>
</body>

<body>

</div>

</body>

ＣＳＳ

@charset "utf-8";

body {
width: 100%;
max-width: 1500px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.image {
width: 200px;
height: 200px;
opacity: 0;
animation: poyo 0.8s cubic-bezier(0.4, 0, 0.1, 0) 1 forwards;
}

.image img {
width: 100%;
height: 100%;
}

@keyframes poyo {
0% {
transform: translateX(1500px);
opacity: 0;
}
100% {
transform: translateX(80%);
}
100% {
opacity: 1;
}
}

@media screen and (max-width: 1000px) {
.image{
animation: none;
transform: none;
transition: unset;
opacity: 1;
}
}