「テンプレート:動き/style.css」の版間の差分

提供:WikiWiki
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
54行目: 54行目:
   animation-duration: 10s;
   animation-duration: 10s;
   backface-visibility: hidden;
   backface-visibility: hidden;
  transform:rotateX(45deg);
}
}
@keyframes spinY1 {
@keyframes spinY1 {
   0% {transform: rotateY(0deg);}
   0% {transform: rotateY(0deg);transform:rotateX(45deg);}
   100% {transform: rotateY(360deg);}
   100% {transform: rotateY(360deg);transform:rotateX(45deg);}
}
}
.spinY2 {
.spinY2 {
64行目: 63行目:
   animation-duration: 10s;
   animation-duration: 10s;
   backface-visibility: hidden;
   backface-visibility: hidden;
  transform:rotateX(45deg);
}
}
@keyframes spinY2 {
@keyframes spinY2 {
   0% {transform: rotateY(180deg);}
   0% {transform: rotateY(180deg);transform:rotateX(45deg);}
   50% {transform: rotateY(360deg);}
   50% {transform: rotateY(360deg);transform:rotateX(45deg);}
   100% {transform: rotateY(180deg);}
   100% {transform: rotateY(180deg);transform:rotateX(45deg);}
}
}

2年9月21日 (I) 22:12時点における版

.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);transform:rotateX(45deg);}
  100% {transform: rotateY(360deg);transform:rotateX(45deg);}
}
.spinY2 {
  animation: spinY2 linear infinite normal;
  animation-duration: 10s;
  backface-visibility: hidden;
}
@keyframes spinY2 {
  0% {transform: rotateY(180deg);transform:rotateX(45deg);}
  50% {transform: rotateY(360deg);transform:rotateX(45deg);}
  100% {transform: rotateY(180deg);transform:rotateX(45deg);}
}