STUDY_html_002_B.html
<html> <style> スタイル </style> <div class="ガゾウ カイテン"></div> <p><button onclick="ろーどしました()"> データをロードしました</button></p> <script> すくりぷと </script> </html>
<style>
p{text-align:left;}
.ガゾウ{background-image:url(STUDY_html_image_002/RAM_GO.png);
background-repeat:no-repeat;
background-position:center top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration:2s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;}
@-webkit-keyframes カイテン
{0%{-webkit-transform:rotate(0);
-webkit-transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;}
20%,60%{-webkit-transform:rotate(80deg);
-webkit-transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;}
40%{-webkit-transform:rotate(60deg);
-webkit-transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;}
80%{-webkit-transform:rotate(60deg)translateY(0);
opacity:1;
-webkit-transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;}
100%{-webkit-transform:translateY(700px);
opacity:0;}}
@keyframes カイテン{0%{transform:rotate(0);
transform-origin:top left;
animation-timing-function:ease-in-out;}
20%,60%{transform:rotate(80deg);
transform-origin:top left;
animation-timing-function:ease-in-out;}
40%{transform:rotate(60deg);
transform-origin:top left;
animation-timing-function:ease-in-out;}
80%{transform:rotate(60deg)translateY(0);
opacity:1;
transform-origin:top left;
animation-timing-function:ease-in-out;}
100%{transform:translateY(700px);
opacity:0;}}
.カイテン{-webkit-animation-name:カイテン;
animation-name:カイテン;}
</style>
<script>
function ろーどしました(){location.reload();}
</script>
sample_STUDY_html_002_B.pdf 
サンプル・ダウンロード 
