1日違いの誕生日 【CSS】時間差表示

いつも読んで頂きありがとうございます。

4月は次女と長男の誕生日があります。次女は一人暮らしで家を出て行ったので今回は

息子だけのお祝いとなります。

誕生日同じに日になるかも

次女と長男の誕生日は1日違いです。

我が家は3人子供がいますが全員帝王切開です。病院にもよりますが1人目が帝王切開

の場合は二人目も帝王切開と言うところもあります。私の嫁の場合も次女は帝王切開と

言われて出産しましたが3人目の息子は普通分娩で問題ないと言われました。当初は次

女が生まれた同じ日に帝王切開という話もしましたが普通分娩出来るのであればそっち

の方が嫁は良いと言うことでしたが結局いろいろあって緊急帝王切開となりました。

次女の誕生日と同じになる可能性もありましたが1日早い出産となっています。

帝王切開手術後は痛みが酷いので3～4日後以降にお見舞いに行った方が良いと思います。

1日違いの誕生日の祝いかた

子供が小さい頃は誕生日が1日違いなのでどちらかの誕生日にまとめてしていました

が、ある程度分かってくるとそうはいかなくなります。

やはり自分の誕生日の日に祝ってほしいのもありますが自分の誕生日ケーキが無いとい

うが面白くないみたいです。まあ、ご馳走はどちらかの誕生日だけでもよく単にケーキ

を2日続けて食べたいだけみたいですが。←ここが重要らしい。

しかし、我が家のケーキは手作りのため嫁は面倒らしいですが今年は息子だけなので一

つで済みますね。次女は自分で買って食べると思います。

最後に

我が家も一人ずつ家から出ていきお祝い事も少なくなってきました。

4月は入学や就職、転勤など新生活が始まる月でもあります。新しい環境に慣れるかど

うかは本人次第と学校や職場の雰囲気とかもありますが頑張ってもらいたいですね。

今月は次女と長男の誕生日ですがブログ仲間の中にも4月生まれの人がいると思います

ので誕生日カードを用意しました。

クリック！

 

 

 

今回参考にしたブログはこちら

【CSS】鹿威し（ししおどし）のように揺れる見出し【カタカタ改変】 - Little Strange Software

【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】 - Little Strange Software

時間差で表示させる

 

CSSコード

<style>
@keyframes jikansa{
0%,15%{background-size:0% 0%;}
35%,100%{background-size:100% 100%;}
}
.hyouji{
width:300px;height:200px;
background-image:url("画像URL");
animation:jikansa 13s linear infinite;
background-repeat:no-repeat;
background-position:50% 50%;}

@keyframes jikansa2{
0%,40%{background-size:0% 0%;}
60%,100%{background-size:100% 100%;}
}
.hyouji2{
width:300px;height:200px;
background-image:url("画像URL");
animation:jikansa2 13s linear infinite;
background-repeat:no-repeat;
background-position:100% 100%;}

@keyframes jikansa3{
0%,65%{background-size:0% 0%;}
85%,100%{background-size:100% 100%;}
}
.hyouji3{
width:300px;height:200px;
background-image:url("画像URL");
animation:jikansa3 13s linear infinite;
background-repeat:no-repeat;
background-position:50% 50%;}
</style>
<div class="hyouji">
<div class="hyouji2">
<div class="hyouji3"> </div>
</div>
</div>

コード説明

0%,15%{background-size:0% 0%;}
35%,100%{background-size:100% 100%;}
は0~15％までは画像サイズは0％で15%から35％で徐々に画像が100%になって35％~100%の間は画像サイズが100％のままとなります。
次の画像を時間差で出すには前の画像が35％で画像が100%になるのでそれより後にすればいいので今回は40％にしています。
0%,40%{background-size:0% 0%;}
60%,100%{background-size:100% 100%;}
3枚目の画像も同じ考え方です。

background-position:○% ○%;}
は画像が出てくる設定でX軸とY軸の設定なので50% 50%で中央から、100% 100%だと右角下からになります。

keyframesの数値は変更すると出てくるスピード、表示されるスピードが変わるので自分でいろいろ設定してみて下さい。