Python matplotlibを使って学ぶ統計処理正規分布のソースを表示新しいページはコチラ

<yjavascript>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: {autoNumber: "AMS"} }
});
</script>
</yjavascript>

== '''<span style= "background: #3f17ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 10px; width: 100%; display: inline-block;">正規分布の公式</span>''' ==
<big><big><span style= "background: #3178ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 5px; width: 98%; display: inline-block;">■正規分布の証明</span></big></big>

<span style= "background: linear-gradient(transparent 70%, #c1e0ff 70%);">確率密度関数</span>は以下のように定義されます。

{| style = "width: 100%;"  
| style= "background-color: #c2d7ff; white-space:nowrap; padding:5px; border: dotted 1px black;  border-radius: 10px;" | <big><ymath>$$  f( x) \ =\ \frac{1}{\sqrt{2\pi } \sigma }\exp^{-\frac{1}{2\sigma } (x-\mu )^{2}} \tag{1}  $$ </ymath> </big>
|}

この項目ではこの確率密度関数をpythonを使いつつ理解しようとすることを目指します。
しばらくは工事中で、この説明に必要な数式を試す場所として利用します)。

　

== '''アンダーラインCSSのサンプル<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important"></span> <span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">[蛍光ペンを模した形式]</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important"></span>''' ==
=== 赤色系統 ===
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffadad 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffadad 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ff9393 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ff9393 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ff7f7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">正規分布</span>

　

=== 水色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #c1e0ff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #c1e0ff 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #9eceff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #9eceff 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #7fbfff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #7fbfff 75%); font-weight:bold; ">正規分布</span>

　
=== 黄色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #fff799 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #fff799 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #edde7b 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #edde7b 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffdc00 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffdc00 75%); font-weight:bold; ">正規分布</span>

　
=== 緑色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #b2ffb2 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #b2ffb2 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #7fff7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #7fff7f 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #bfff7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #bfff7f 75%); font-weight:bold; ">正規分布</span>

　
=== 桃色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffc1e0 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffc1e0 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffc0cb 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffc0cb 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ff9ece 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ff9ece 75%); font-weight:bold; ">正規分布</span>

　
=== 淡水色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #c1ffff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #c1ffff 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #bce2e8 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #bce2e8 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #afeeee 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #afeeee 75%); font-weight:bold; ">正規分布</span>

　
=== 橙色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffe0c1 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffe0c1 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffce9e 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffce9e 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffbf7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffbf7f 75%); font-weight:bold; ">正規分布</span>

　
=== 紫色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #cab8d9 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #cab8d9 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ce9eff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ce9eff 75%); font-weight:bold; ">正規分布</span>


=== アニメーションマーカー ===
<yjavascript> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
  $(".marker-animation5").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
});
</script>
<style type= "text/css">
.marker-animation5.active{
  background-size: 100% 100%;
  background-position: 0px 100%;
}

.marker-animation5 {
  background-image: -webkit-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(bottom, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(to bottom, transparent 50%, #7fbfff 50%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0px 100%;
  transition: all 5s ease;
  font-weight: bold;
}
</style>
</yjavascript>

<span class="marker-animation5">
ここにマーカーをつける文章をいれる
</span>

<syntaxhighlight lang="javascript">
<script>
$(window).scroll(function (){
  $(".marker-animation").each(function(){
    var position = $(this).offset().top;             //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop();           //現在表示している画面の上部部分についてページ位置情報を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){       //アニメーションマーカーを行う文字の位置から
                                                                 //画面の高さを引いた部分よりスクロール位置が大きくなったら
      $(this).addClass('active');                     //.marker-animationのactiveというスタイル要素状態を設定する
    }
  });
});
</script>

</syntaxhighlight>
<syntaxhighlight lang="css">
<style type= "text/css">
.marker-animation.active{                 /*mraker-animation.activeというスタイルになると*/
 background-position: -100% .5em; /*マーカー領域のまるまる1区画分の位置に背景領域を設定し、*/
                                                     　/*更に背景高さ位置を上から0.5em(1emは文字1文字分の幅に相当なので、*/
 　                                                 　/*文字半分くらい)に設定、背景領域の下側が押し出される感じ */
}

.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: linear-gradient(to left, transparent 50%, rgb(255,250,153) 50%);
                                                          /*全てlinear-gradientだけど上4つはブラウザ毎の設定 */
　                                                       /*200%の横幅に対して右から半分は透明に残りは指定色に*/
  background-repeat: repeat-x;          /*100%を超える領域も使うのでその部分はx方向に繰り返す*/
  background-size: 200% .8em;        /*領域の大きさは横は2倍に　高さマーカー高さ幅は0.8emに*/
  background-position: 0 .5em;        /*背景の横位置は0に、上は0.5emに。この位置に戻そうとするような動きになる*/
  transition: all 2s ease;                   /*動かす指定で違うところのpositionになっていると2秒かけて最後に指定した*/
                                                       /*positionにする。*/
  font-weight: bold;
}
</style>

</syntaxhighlight>


<yjavascript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
  $(".marker-animation").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
  $(".marker-animation2").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
  $(".marker-animation3").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
  $(".marker-animation4").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
});
</script>
<style type= "text/css">
.marker-animation.active{
 background-position: -100% 100%;
}

.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-repeat: repeat-x;
  background-size: 200% 20%;
  background-position: 0px 100%;
  transition: all 2s ease;
  font-weight: bold;
}
.marker-animation2.active{
 background-position: -100% 0.5em;
}

.marker-animation2 {
  background-image: -webkit-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-repeat: repeat-x;
  background-size: 200% 0.8em;
  background-position: 0 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}

.marker-animation3.active{
 background-position: -100% 0.5em;
}

.marker-animation3 {
  background-image: -webkit-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-repeat: repeat-x;
  background-size: 200% 0.1em;
  background-position: 0 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}

.marker-animation4.active{
  background-size: 0% 100%
  background-position: 0px 100%;
}

.marker-animation4 {
  background-image: linear-gradient(to bottom, transparent 75%, #7fbfff 75%);
  /*background-blend-mode: ;*/
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0px 100%; 
  transition: all 2s ease;
  font-weight: bold;
}
</style>
</yjavascript>

background-size: 200% 20%

background-position: 0px 100% ← -100% 100%

<span class="marker-animation">
ここにマーカーをつける文章をいれる
</span>



background-size: 200% 0.8em

background-position: 0px 0.5em ← -100% 0.5em

<span class="marker-animation2">
ここにマーカーをつける文章をいれる

</span>

background-size: 200% 0.1em

background-position: 0px 0.5em ← -100% 0.5em

<span class="marker-animation3">
ここにマーカーをつける文章をいれる
</span>

lineargradient(to bottom,…  -webkit-llineargradient(bottom その他のブラウザ向けもwebkitと同じ

background-repeat: no-repeat:

background-size: 200% 100%;

background-position: 0 100%; ← -100% 100%;

<span class="marker-animation4">
ここにマーカーをつける文章をいれる
</span>


lineargradient(to bottom,…  -webkit-llineargradient(bottom その他のブラウザ向けもwebkitと同じ

background-repeat: no-repeat:

background-size: 200% 100%;

background-position: 0 100%; ← -100% 100%;