torinaブログ

DjangoとBootstrap4で作成したブログ
Python, Django, Kivy, Bootstrap, Apache等のメモです
ソースコード

CSSで、gifっぽいアニメーション

HTMLとCSSとJavaScript CSS お洒落
約307日前 2016年4月19日11:24
人様のホームページで見かけた面白いアニメーションを紹介します。
GIFみたいですが、CSSで実装されています。
デモ①
http://torina.top/media/html/blog187_1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .gif-box {
        width: 300px;
        position: relative;
      }

      .gif-anime {
        position: absolute;
        animation: women-gif 2s infinite;
        -webkit-animation: women-gif 2s infinite;
      }
      .after {
        animation-delay: 1s;
        -webkit-animation-delay: 1s;
      }

      @keyframes women-gif {
        0%   { opacity: 1; }
        50%   { opacity: 1; }
        75%   { opacity: 0; }
        100% { opacity: 0; }
      }
      @-webkit-keyframes women-gif {
        0%   { opacity: 1; }
        50%   { opacity: 1; }
        75%   { opacity: 0; }
        100% { opacity: 0; }
      }
    </style>
  </head>
  <body>

    <div class="gif-box">


    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


この2つの画像が交互に表示されます。





gif-animeにはposition:absolute;、
親要素であるgif-boxにrelativeを指定すると、gif-box内に画像を重ね合わせた状態にした上で、カスタマイズが可能です。
具体的には、上寄せや下寄せ、左寄せ、右寄せ等ですね。
http://torina.top/main/186/
    <style>
      .gif-box {
        width: 300px;
        position: relative;
      }

      .gif-anime {
        position: absolute;
        animation: women-gif 2s infinite;
        -webkit-animation: women-gif 2s infinite;
      }
      .after {
        animation-delay: 1s;
        -webkit-animation-delay: 1s;
      }

      @keyframes women-gif {
        0%   { opacity: 1; }
        50%   { opacity: 1; }
        75%   { opacity: 0; }
        100% { opacity: 0; }
      }
      @-webkit-keyframes women-gif {
        0%   { opacity: 1; }
        50%   { opacity: 1; }
        75%   { opacity: 0; }
        100% { opacity: 0; }
      }
    </style>


上記の書き方ですが、ページが読み込まれた際に、頭が2つある状態になってしまっています。
これを解決したいならば、以下のようにします。
      .after {
        animation-delay: -1s;
        -webkit-animation-delay: -1s;
      }


デモ② ちゃんと綺麗になりましたね。
http://torina.top/media/html/blog187_2.html

animation-delayには、負の数も指定することができます。
どういうことになるかというと、afterの画像は1秒既に経った扱いで表示されることになります。

更にですが、上記は恐らく一部スマートフォンでは画像が同期しないでしょう。
以下のようにします。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .gif-box {
        width: 300px;
        position: relative;
      }
 
      .gif-anime {
        position: absolute;
        animation: women-gif 2s infinite;
        -webkit-animation: women-gif 2s infinite;
      }
 
      .before {
        animation-delay: -1s;
        -webkit-animation-delay: -1s;        
      }
      .after {
        animation-delay: -2s;
        -webkit-animation-delay: -2s;
      }

 
      @keyframes women-gif {
        0%   { opacity: 1; }
        50%   { opacity: 1; }
        75%   { opacity: 0; }
        100% { opacity: 0; }
      }
      @-webkit-keyframes women-gif {
        0%   { opacity: 1; }
        50%   { opacity: 1; }
        75%   { opacity: 0; }
        100% { opacity: 0; }
      }

    </style>
  </head>
  <body>
 
    <div class="gif-box">


    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


デモ③ スマホ対応
http://torina.top/media/html/blog187_3.html

変更点は下記です。
beforeというクラスが増え、animation-delayも変更しました。
      .before {
        animation-delay: -1s;
        -webkit-animation-delay: -1s;        
      }
      .after {
        animation-delay: -2s;
        -webkit-animation-delay: -2s;
      }
    <div class="gif-box">


    </div>


http://stackoverflow.com/questions/27072845/ipad-safari-css3-animation-timing-bug

CSSアニメーションの参考ページ
https://css-tricks.com/snippets/css/keyframe-animation-syntax/