JavaScriptでライブラリを使わずにカメラのフラッシュのようなアニメーションをする


JavaScript, html, cssでカメラのフラッシュのようなアニメーションをしたいと思っています。  
buttonを押したときに画面全体を一瞬だけ白く光らせるにはどうすればいいのでしょうか?  
jQueryなどを使えばできるようですが、学習のため、ライブラリを使わずに実現したいと考えています。

[code]

    
    <!DOCTYPE html>
    <html lang="ja">
        <head>
            <title&gtCamera; flash</title>
            <meta charset="utf-8">
        </head>
        <body>
            <div id="cameraflash">
                <button>Camera flash</button>
                <p>Camera flash</p>
            </div>
        </body>
    </html>
    
    
    
[/code]




**jQueryを使わずに** ……ですよね？  
特に理由が無ければjQueryを使えば楽なので使えばいいと思いますが……  
基本は下記ですかね。

[code]

    var isLock = false;
    var target_elm = document.getElementById("flash");
    var perc = 0.1;
    var timer = null;
    function run_flash(){
      //処理中じゃないか
      if(!isLock){
        //処理ロック
        isLock=true;
        //透過度リセット
        perc=0.1;
        //0.1秒間隔(本当は三角関数使うなどして自然な上昇率にするといい)
        timer = setInterval(
          function(){
            if(1<=perc){
              //IE
              target_elm.style.filter = 'alpha(opacity=100)';
              //FF
              target_elm.style.MozOpacity = 1.0;
              //other
              target_elm.style.opacity = 1.0;
              //処理ロック解除
              isLock = false;
              //タイマー削除
              clearInterval(timer);
            }else{
              //IE
              target_elm.style.filter = 'alpha(opacity='+(100*perc)+')';
              //FF
              target_elm.style.MozOpacity = perc;
              //other
              target_elm.style.opacity = perc;
              perc+=0.1;
            }
          },
          100
        );
      }
    }
[/code]

[code]

    #flash{
      width:128px;
      height:128px;
      background-color:#a0a0a0;
    }
[/code]

[code]

    <div id="flash">私だぁ！</div>
    <button onclick="run_flash();">ピカァ！</button>
[/code]

* * *

  
一応jQuery版は下記になります。  
コード量からして楽なのは断然下記ですね。  
他のライブラリを汚してしまうなど理由があれば仕方ないですが……

[code]

    function run_flash(){
     $("#flash").css("opacity", "0.1");
     $("#flash").css("filter", "alpha(opacity=10)");
     $("#flash").fadeTo("middle", 1.0);
    }
[/code]

[code]

    #flash{
      width:128px;
      height:128px;
      background-color:#a0a0a0;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="flash">私だぁ！</div>
    <button onclick="run_flash();">ピカァ！</button>
[/code]




残念ながらHTMLの機能だけで希望のアニメーションをすることができないようです。  
ただし、JavascriptとCSSも使えば、カメラのフラッシュみたいなアニメーションが簡単にできます。

以下のポストは英語なんですけど、一番上のvihanさんによる回答には使えるコードが載っています  
<https://stackoverflow.com/questions/29594023/getting-camera-like-shutter-
flash-effect-on-button-click-with-html5-and-jquery>

これらの言語に詳しくない場合、以下の入門サイトを参照すればすぐ分かると思っております。  
jQueryに関する入門サイトはこちらです：<http://ponk.jp/jquery/basic/>  
そしてCSS : <http://www.ink.or.jp/~bigblock/css/>

以上、頑張ってください

