「テンプレート:動き/style.css」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
(同じ利用者による、間の9版が非表示) | |||
51行目: | 51行目: | ||
} | } | ||
.spinY1 { | .spinY1 { | ||
animation: spinY1 | animation: spinY1 linear infinite normal; | ||
animation-duration: 10s; | |||
backface-visibility: hidden; | backface-visibility: hidden; | ||
} | } | ||
59行目: | 60行目: | ||
} | } | ||
.spinY2 { | .spinY2 { | ||
animation: spinY2 | animation: spinY2 linear infinite normal; | ||
animation-duration: 10s; | |||
backface-visibility: hidden; | backface-visibility: hidden; | ||
} | } | ||
66行目: | 68行目: | ||
50% {transform: rotateY(360deg);} | 50% {transform: rotateY(360deg);} | ||
100% {transform: rotateY(180deg);} | 100% {transform: rotateY(180deg);} | ||
} | |||
.stumble{ | |||
animation: stumble linear infinite normal; | |||
animation-duration: 1s; | |||
} | |||
.revstumble{ | |||
animation: stumble linear infinite reverse; | |||
animation-duration: 1s; | |||
} | |||
@keyframes stumble{ | |||
0%{transform: rotate(0deg);} | |||
100%{transform: rotate(90deg);} | |||
} | |||
.expand{ | |||
animation: expand ease infinite normal; | |||
animation-duration: 1s; | |||
} | |||
@keyframes expand{ | |||
0%{transform: scale(1);} | |||
100%{transform: scale(3);} | |||
} | } |
4年1月6日 (K) 11:09時点における最新版
.bound {
animation: bound .3s ease infinite alternate;
}
@keyframes bound {
0% {transform: translateY(25px);}
100% {transform: translateY(-25px);}
}
.updown {
animation: updown .3s linear infinite alternate;
}
@keyframes updown {
0% {transform: translateY(25px);}
100% {transform: translateY(-25px);}
}
.RL {
animation: RL .3s linear infinite alternate;
}
@keyframes RL {
0% {transform: translateX(25px);}
100% {transform: translateX(-25px);}
}
.spin1 {
animation: spin1 .9s linear infinite normal;
}
@keyframes spin1 {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spin2 {
animation: spin2 .9s linear infinite normal;
}
@keyframes spin2 {
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
.spin3 {
animation: spin1 .18s linear infinite normal;
}
.spin4 {
animation: spin2 .18s linear infinite normal;
}
@keyframes fade {
0% {background-color:transparent}
75% {background-color:transparent}
100% {background-color:black}
}
.fade{
animation: fade ease-in;
animation-duration: 10s;
animation-fill-mode: forwards;
}
.spinY1 {
animation: spinY1 linear infinite normal;
animation-duration: 10s;
backface-visibility: hidden;
}
@keyframes spinY1 {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
.spinY2 {
animation: spinY2 linear infinite normal;
animation-duration: 10s;
backface-visibility: hidden;
}
@keyframes spinY2 {
0% {transform: rotateY(180deg);}
50% {transform: rotateY(360deg);}
100% {transform: rotateY(180deg);}
}
.stumble{
animation: stumble linear infinite normal;
animation-duration: 1s;
}
.revstumble{
animation: stumble linear infinite reverse;
animation-duration: 1s;
}
@keyframes stumble{
0%{transform: rotate(0deg);}
100%{transform: rotate(90deg);}
}
.expand{
animation: expand ease infinite normal;
animation-duration: 1s;
}
@keyframes expand{
0%{transform: scale(1);}
100%{transform: scale(3);}
}