CSSで、animation効果と使って動きをつけてる場合。
スマホ画面の（一定の画面幅以下）の場合は
animation効果を解除したい場合。
その方法調べたがあまり情報が見つからなかったので
記事に残します。
今回調べてみて、JavaScriptを使う方法と、CSSで完了
出来る方法の２つがあるみたいとわかった。
この記事では、CSSのみで出来る方法をかいてます。
animation効果を解除する方法
animation効果を設定してる、プロパティ指定で出来ます。
今回書いたコード
@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>
ＣＳＳ
@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;
}
}
コメント