CSSで一定時間(数秒間)、表示した後に自動で非表示するギミックの手順です。
🗽 サンプルの挙動
JSFiddle
🗻 CSS
#hideMe { -moz-animation: cssAnimation 0s ease-in 5s forwards; -webkit-animation: cssAnimation 0s ease-in 5s forwards; -o-animation: cssAnimation 0s ease-in 5s forwards; animation: cssAnimation 0s ease-in 5s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes cssAnimation { to { width:0; height:0; overflow:hidden; } } @-webkit-keyframes cssAnimation { to { width:0; height:0; visibility:hidden; } }
|
🚕 HTML
<div id='hideMe'>Wait for it...div>
|
🎉 参考リンク
🖥 VULTRおすすめ
「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。
最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!