transform, transition, animation, media query
14436 ワード
アニメーションサンプルサイト:https://animista.net/
transform遺伝子組み換えはドーム要素の変形とは無関係である.
:ダンプは隣の他の要因に影響しません.
他の要素を変形することなく、必要な要素を移動するブロック要素. 
transition
トランジション:時間とともにアトリビュート(Attribute)が変化する
マウスを離すと画像が回転する例
にマウスを置くとダウンジャケットが大きくなり背景色が変化する例 アニメーションは、2つ以上のレベル(0%-50%-100%)で です.
CSSは、媒体の種類に応じて選択的に適用することができる.
横モード;幅が次の条件を満たすと色が変わる例:
transform
:ダンプは隣の他の要因に影響しません.
他の要素を変形することなく、必要な要素を移動するブロック要素.
p {
transform: rotate(10deg); }<p>letter letter letter letter</p>transition
トランジション:時間とともにアトリビュート(Attribute)が変化する
マウスを離すと画像が回転する例
/* 1.transition 예제 */
#lion {
border: 1px solid black;
transition: transform 1s ease-in-out;
}
#lion:hover {
transform: rotateY(180deg);
} <img src="./lion.png" width="100px" id="lion" /> /* 2.transition 예제 */
a {
padding: 10px;
border-radius: 20px;
text-decoration: none;
font-size: 18px;
background-color: tomato;
color: white;
/* 1)bg,color,psdding 다 바꿀때*/
/* transition: all 1s ease-in-out;*/
/* 2)padding이랑 bg만 지정해서 바꿀때*/
transition: padding 3s ease-in-out, background-color 1s ease;
}
a:hover {
background-color: white;
color: tomato;
padding: 20px 5px;
} <a href="#">go page</a> /* 3.animation 예제 - transition과 transform 활용 */
@keyframes rotaAni {
0% {
transform: rotateY(0);
border: 1px solid black;
}
50% {
transform: rotateY(180deg) translateX(180px);
/* opacity: 0; */
border: 3px solid red;
}
100% {
transform: rotateY(0) translateX(0px);
border: 1px solid black;
}
}
#lion2 {
animation: rotaAni 5s ease-in-out infinite;
} <img src="./lion.png" width="100px" id="lion2" />CSSは、媒体の種類に応じて選択的に適用することができる.
横モード;幅が次の条件を満たすと色が変わる例:
div {
background-color: blue;
width: 100px;
height: 100px;
}
@media screen and (min-width: 400) and (max-width: 600px) and (orientation: landscape) {
div {
background-color: red;
}
span {
display: none;
}
}
@media screen and (min-width: 601px) and (max-width: 900px) and (orientation: landscape) {
div {
background-color: greenyellow;
}
span {
display: none;
}
}
@media screen and (min-width: 901px) and (max-width: 1200px) and (orientation: landscape) {
div {
background-color: orange;
}
span {
display: none;
}
} <div></div>
<span>Please flip your phone </span>Reference
この問題について(transform, transition, animation, media query), 我々は、より多くの情報をここで見つけました https://velog.io/@jhplus13/transition-animationテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol