回答編集履歴

1 読みやすく修正。

kei344

kei344 score 56247

2016/08/05 00:53  投稿

雑ですが。
```CSS
.anim {
-webkit-animation-name: roundy;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: once;
-webkit-animation-duration: 5s;
  -moz-animation-name: roundy;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: once;
  -moz-animation-duration: 5s;
       animation-name: roundy;
       animation-timing-function: ease-in-out;
       animation-iteration-count: once;
       animation-duration: 10s;
}
@-webkit-keyframes roundy {
   0%  { transform: translateZ( calc(100vw / 1.5 * -1) ); }
  25%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); }
  50%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); }
  75%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); }
 100%  { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); }
}
  @-moz-keyframes roundy {
   0%  { transform: translateZ( calc(100vw / 1.5 * -1) ); }
  25%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); }
  50%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); }
  75%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); }
 100%  { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); }
}
       @keyframes roundy {
   0%  { transform: translateZ( calc(100vw / 1.5 * -1) ); }
  25%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); }
  50%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); }
  75%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); }
 100%  { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); }
}
```**動くサンプル:**[https://jsfiddle.net/12u0tzoh/1/](https://jsfiddle.net/12u0tzoh/1/)
 
---  
 
【CSS アニメーション - CSS | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
【[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ | コリス】
[http://coliss.com/articles/build-websites/operation/css/enhance-your-sites-with-css3-animations-by-onextrapixel.html](http://coliss.com/articles/build-websites/operation/css/enhance-your-sites-with-css3-animations-by-onextrapixel.html)
【animation-name-CSS3リファレンス】
[http://www.htmq.com/css3/animation-name.shtml](http://www.htmq.com/css3/animation-name.shtml)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る