私はWebサイトのデザイン、Javascript、CSS3、およびJQueryの新機能です。対応する領域にマウスを移動すると、ページのヘッダー/フッターを自動的に非表示にすることに成功しましたが、ユーザーがマウスを任意の領域に移動したときにページのフッター/ヘッダーを表示したいと思いますページ。CSS3 のみを使用してそれを行うことはできますか、それとも JQuery または Javascript を使用する必要がありますか? CSS3 だけではできない場合は、JQuery や JavaScript を使ってそれを行う方法を教えてください。
これが私のCSS3ファイルです：
html,body,div,span,figure,h1,h2,h3,h4,p,a,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,details,figure,figcaption,footer,header,hgroup,nav,section,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
body{line-height:1;}
ol,ul{list-style:none;}
img{-ms-interpolation-mode:bicubic;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input[type="submit"]:focus{outline:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
::-moz-selection{background:#cd3737;color:#fff;text-shadow:none;}
::selection{background:#cd3737;color:#fff;text-shadow:none;}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-x:hidden;}
html,body,input{font-family:'Open Sans',sans-serif;color:#16343b;font-size:14px;line-height:1.5;font-weight:400;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
h1,h2,h3,h4,strong{font-weight:700;}
a,a:visited{color:#e34430;-webkit-transition:color 200ms linear;-moz-transition:color 200ms linear;-ms-transition:color 200ms linear;-o-transition:color 200ms linear;transition:color 200ms linear;text-decoration:none;cursor:pointer;}
a:hover{color:#982e29;}
a:hover,a:active,a:focus{outline:none;}
html,body{min-width:990px;-webkit-user-select:none;}
h1,h2,h3,h4,p,li,a,span,input{-webkit-user-select:text;}
.fo{-webkit-animation:fadeOut 0.4s both;-moz-animation:fadeOut 0.4s both;-ms-animation:fadeOut 0.4s both;-o-animation:fadeOut 0.4s both;animation:fadeOut 0.4s both;}
::-webkit-input-placeholder{color:#a9a9a9;}
input:-moz-placeholder{color:#a9a9a9;}
section[id]{position:relative;min-width:990px;z-index:101;}
.no-js #header,.no-js #footer{opacity:1 !important;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translatey(0);-ms-transform:translatey(0);-o-transform:translatey(0);transform:translatey(0);}
body.active {
-webkit-animation:fadeOut 800ms 500ms linear both;
-moz-animation:fadeOut 800ms 500ms linear both;
-ms-animation:fadeOut 800ms 500ms linear both;
-o-animation:fadeOut 800ms 500ms linear both;
animation:fadeOut 800ms 500ms linear both;
}
#header{
width:100%;
min-width:990px;
height:100px;
position:fixed;
/* top:0; */
left:0;
background:black;
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05),0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05),0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow:0 1px 0 rgba(0, 0, 0, 0.05),0 1px 3px rgba(0, 0, 0, 0.15);
z-index:200;
text-align:center;
-webkit-transition:top 450ms 50ms ease-out, opacity 600ms 50ms ease-out;
-moz-transition:top 450ms 50ms ease-out, opacity 600ms 50ms ease-out;
-ms-transition:top 450ms 50ms ease-out, opacity 600ms 50ms ease-out;
-o-transition:top 450ms 50ms ease-out, opacity 600ms 50ms ease-out;
transition:top 450ms 50ms ease-out, opacity 600ms 50ms ease-out;
top:-40px;
opacity:0;
}
body.scrolling #header,body.mousemove #header,#header:hover,#header.active
{
top:0;
opacity:1;
}
#footer{
height:100px;
position:fixed;
/* bottom:0; */
left:0;
width:100%;
background:green
;-webkit-box-shadow:0 -1px 0 rgba(0, 0, 0, 0.05),0 -1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 -1px 0 rgba(0, 0, 0, 0.05),0 -1px 3px rgba(0, 0, 0, 0.15);
box-shadow:0 -1px 0 rgba(0, 0, 0, 0.05),0 -1px 3px rgba(0, 0, 0, 0.15);
z-index:199;
min-width:990px;
opacity:0;
bottom:-49px;
-webkit-transition:bottom 450ms 50ms ease-out,opacity 600ms 50ms ease-out;
-moz-transition:bottom 450ms 50ms ease-out,opacity 600ms 50ms ease-out;
-ms-transition:bottom 450ms 50ms ease-out,opacity 600ms 50ms ease-out;
-o-transition:bottom 450ms 50ms ease-out,opacity 600ms 50ms ease-out;
transition:bottom 450ms 50ms ease-out,opacity 600ms 50ms ease-out;
overflow:hidden;
}
body.scrolling #footer,body.mousemove #footer,#footer:hover,#footer.active
{
bottom:0;
opacity:1;
}
/* #footer.coffee{float:right;padding-top:14px;margin-right:50px;}
#footer.coffee span{background:url('../img/sprites.png') 0 0 no-repeat;display:inline-block;width:15px;height:15px;margin-right:8px;position:relative;top:1px;}
#footer.coffee a{font-weight:700;} */
#footer.scroll,#footer.top{width:auto;height:32px;background:none;-webkit-border-radius:none;-moz-border-radius:none;border-radius:none;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;color:#e34430;padding-top:14px;position:relative;font-weight:700;text-shadow:0 1px 1px #fff;float:right;margin-right:154px;opacity:1;visibility:visible;}
#footer.top{opacity:0;display:none;margin-right:-154px;}
#footer.scroll.inactive{opacity:0;}
#footer.scroll.inactive+.top{opacity:1;display:block;}
#footer.scroll span,#footer.top span{float:left;width:32px;height:32px;background:#e0371e;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 2px #af2c19;-moz-box-shadow:inset 0 1px 2px #af2c19;box-shadow:inset 0 1px 2px #af2c19;margin-right:12px;margin-top:-4px;position:relative;-webkit-transition:background 200ms linear;-moz-transition:background 200ms linear;-ms-transition:background 200ms linear;-o-transition:background 200ms linear;transition:background 200ms linear;}
#footer.scroll:hover span{background:#d5270d;}
#footer.scroll:after,#footer.top:after{content:"";background:url('../img/sprites.png') -30px 0 no-repeat;position:absolute;width:18px;height:13px;top:21px;left:7px;}
#footer.top:after{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);top:18px;}
#footer.twitter{float:left;margin-left:20px;padding-top:12px;}
/* Menu items */
#menu li{
display: inline;
}
#menu a{
/* TODO: I still don't know how to set the items in the the vertical center of the header_contents div*/
text-decoration: none;
padding: 10px;
background-color: #000000;
color: #fff;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
font-family: Tahoma;
font-size: 12px;
}
#menu a:hover {
background-color: #FFFF00;
}
.center {
direction: ltr;
text-align: center;
width: 90%;
padding: 0;
}
#logo {
float: right;
}
#content {
width: 100%;
float: left;
margin-top: -10px;
height: 100%;
border-top: 1px solid #dadac5;
}
#menu {
float: left;
margin-left: 10px;
margin-top: 25px;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
@-webkit-keyframes position_fix{0%,100%{-webkit-transform:scale(1);}}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translate3d(0, -2000px, 0);} 60%{opacity:1;-webkit-transform:translate3d(0, 30px, 0);} 80%{-webkit-transform:translate3d(0, -5px, 0);} 100%{-webkit-transform:translate3d(0, 0, 0);}}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translatey(-2000px);} 60%{opacity:1;-moz-transform:translatey(30px);} 80%{-moz-transform:translatey(-5px);} 100%{-moz-transform:translatey(0);}}@-ms-keyframes bounceInDown{0%{opacity:0;-ms-transform:translatey(-2000px);} 60%{opacity:1;-ms-transform:translatey(30px);} 80%{-ms-transform:translatey(-5px);} 100%{-ms-transform:translatey(0);}}@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translatey(-2000px);} 60%{opacity:1;-o-transform:translatey(30px);} 80%{-o-transform:translatey(-5px);} 100%{-o-transform:translatey(0);}}@keyframes bounceInDown{0%{opacity:0;transform:translatey(-2000px);} 60%{opacity:1;transform:translatey(30px);} 80%{transform:translatey(-5px);} 100%{transform:translatey(0);}}@-webkit-keyframes rolling{0%{-webkit-transform:rotatez(0);} 100%{-webkit-transform:rotatez(360deg);}}@-moz-keyframes rolling{0%{-moz-transform:rotate(0);} 100%{-moz-transform:rotate(360deg);}}@-ms-keyframes rolling{0%{-ms-transform:rotate(0);} 100%{-ms-transform:rotate(360deg);}}@-o-keyframes rolling{0%{-o-transform:rotate(0);} 100%{-o-transform:rotate(360deg);}}@keyframes rolling{0%{transform:rotate(0);} 100%{transform:rotate(360deg);}}@-webkit-keyframes coming{0%{-webkit-transform:translate3d(-1200px, 0, 0);opacity:0;} 30%{opacity:0;} 50%{opacity:1;} 100%{-webkit-transform:translate3d(0, 0, 0);opacity:1;}}@-moz-keyframes coming{0%{-moz-transform:translatex(-1200px);opacity:0;} 30%{opacity:0;} 50%{opacity:1;} 100%{-moz-transform:translatex(0);opacity:1;}}@-ms-keyframes coming{0%{-ms-transform:translatex(-1200px);opacity:0;} 30%{opacity:0;} 50%{opacity:1;} 100%{-ms-transform:translatex(0);opacity:1;}}@-o-keyframes coming{0%{-o-transform:translatex(-1200px);opacity:0;} 30%{opacity:0;} 50%{opacity:1;} 100%{-o-transform:translatex(0);opacity:1;}}@keyframes coming{0%{transform:translatex(-1200px);opacity:0;} 30%{opacity:0;} 50%{opacity:1;} 100%{-webkit-transform:translatex(0);opacity:1;}}@-webkit-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;visibility:hidden;}}@-moz-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;visibility:hidden;}}@-ms-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;visibility:hidden;}}@-o-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;visibility:hidden;}}@keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;visibility:hidden;}}@-webkit-keyframes fadeIn{0%{opacity:0;visibility:visible !important;} 100%{opacity:1;visibility:visible !important;}}@-moz-keyframes fadeIn{0%{opacity:0;visibility:visible;} 100%{opacity:1;visibility:visible;}}@-ms-keyframes fadeIn{0%{opacity:0;visibility:visible;} 100%{opacity:1;visibility:visible;}}@-o-keyframes fadeIn{0%{opacity:0;visibility:visible;} 100%{opacity:1;visibility:visible;}}@keyframes fadeIn{0%{opacity:0;visibility:visible;} 100%{opacity:1;visibility:visible;}}@-webkit-keyframes fadeInArrows{0%{opacity:0;visibility:visible;} 100%{opacity:.5;visibility:visible;}}@-moz-keyframes fadeInArrows{0%{opacity:0;visibility:visible;} 100%{opacity:.5;visibility:visible;}}@-ms-keyframes fadeInArrows{0%{opacity:0;visibility:visible;} 100%{opacity:.5;visibility:visible;}}@-o-keyframes fadeIn{0%{opacity:0;visibility:visible;} 100%{opacity:.5;visibility:visible;}}@keyframes fadeInArrows{0%{opacity:0;visibility:visible;} 100%{opacity:.5;visibility:visible;}}@-webkit-keyframes active_left{0%{margin-left:-59px;} 100%{margin-left:0;}}@-moz-keyframes active_left{0%{margin-left:-59px;} 100%{margin-left:0;}}@-ms-keyframes active_left{0%{margin-left:-59px;} 100%{margin-left:0;}}@-o-keyframes active_left{0%{margin-left:-59px;} 100%{margin-left:0;}}@keyframes active_left{0%{margin-left:-59px;} 100%{margin-left:0;}}@-webkit-keyframes active_right{0%{margin-left:59px;} 100%{margin-left:0;}}@-moz-keyframes active_right{0%{margin-left:59px;} 100%{margin-left:0;}}@-ms-keyframes active_right{0%{margin-left:59px;} 100%{margin-left:0;}}@-o-keyframes active_right{0%{margin-left:59px;} 100%{margin-left:0;}}@keyframes active_right{0%{margin-left:59px;} 100%{margin-left:0;}}@-webkit-keyframes inactive_left{0%{margin-left:0;} 100%{margin-left:-59px;}}@-moz-keyframes inactive_left{0%{margin-left:0;} 100%{margin-left:-59px;}}@-ms-keyframes inactive_left{0%{margin-left:0;} 100%{margin-left:-59px;}}@-o-keyframes inactive_left{0%{margin-left:0;} 100%{margin-left:-59px;}}@keyframes inactive_left{0%{margin-left:0;} 100%{margin-left:-59px;}}@keyframes inactive_right{0%{margin-left:0;} 100%{margin-left:59px;}}@-webkit-keyframes inactive_right{0%{margin-left:0;} 100%{margin-left:59px;}}@-moz-keyframes inactive_right{0%{margin-left:0;} 100%{margin-left:59px;}}@-ms-keyframes inactive_right{0%{margin-left:0;} 100%{margin-left:59px;}}@-o-keyframes inactive_right{0%{margin-left:0;} 100%{margin-left:59px;}}@keyframes inactive_right{0%{margin-left:0;} 100%{margin-left:59px;}}@-webkit-keyframes shadow_is_gone{0%{-webkit-box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;} 100%{-webkit-box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;}}@-moz-keyframes shadow_is_gone{0%{-moz-box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;} 100%{-moz-box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;}}@-ms-keyframes shadow_is_gone{0%{-ms-box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;} 100%{-ms-box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;}}@-o-keyframes shadow_is_gone{0%{-o-box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;} 100%{-o-box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;}}@keyframes shadow_is_gone{0%{box-shadow:inset 0 1px 1px #828282, 0 1px 1px #fff;} 100%{box-shadow:inset 0 1px 2px #af2c19, 0 1px 1px #fff;}}@-webkit-keyframes shadow_is_back{0%{-webkit-box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;} 100%{-webkit-box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;}}@-moz-keyframes shadow_is_back{0%{-moz-box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;} 100%{-moz-box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;}}@-o-keyframes shadow_is_back{0%{-o-box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;} 100%{-o-box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;}}@-ms-keyframes shadow_is_back{0%{-ms-box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;} 100%{-ms-box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;}}@keyframes shadow_is_back{0%{box-shadow:inset 0 1px 1px #af2c19, 0 1px 1px #fff;} 100%{box-shadow:inset 0 1px 2px #828282, 0 1px 1px #fff;}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translatey(20px);} 100%{opacity:1;-webkit-transform:translatey(0);}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translatey(20px);} 100%{opacity:1;-moz-transform:translatey(0);}}@-ms-keyframes fadeInUp{0%{opacity:0;-ms-transform:translatey(20px);} 100%{opacity:1;-ms-transform:translatey(0);}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translatey(20px);} 100%{opacity:1;-o-transform:translatey(0);}}@keyframes fadeInUp{0%{opacity:0;transform:translatey(20px);} 100%{opacity:1;transform:translatey(0);}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translatey(-20px);} 100%{opacity:1;-webkit-transform:translatey(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translatey(-20px);} 100%{opacity:1;-moz-transform:translatey(0);}}@-ms-keyframes fadeInDown{0%{opacity:0;-ms-transform:translatey(-20px);} 100%{opacity:1;-ms-transform:translatey(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translatey(-20px);} 100%{opacity:1;-o-transform:translatey(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translatey(-20px);} 100%{opacity:1;transform:translatey(0);}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translatey(0);} 100%{opacity:0;-webkit-transform:translatey(-20px);}}@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translatey(0);} 100%{opacity:0;-moz-transform:translatey(-20px);}}@-ms-keyframes fadeOutUp{0%{opacity:1;-ms-transform:translatey(0);} 100%{opacity:0;-ms-transform:translatey(-20px);}}@-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translatey(0);} 100%{opacity:0;-o-transform:translatey(-20px);}}@keyframes fadeOutUp{0%{opacity:1;transform:translatey(0);} 100%{opacity:0;transform:translatey(-20px);}}@-webkit-keyframes shakeIt{0%{-webkit-transform:translate3d(0, 0, 0);} 10%{-webkit-transform:translate3d(-20px, 0, 0);} 20%{-webkit-transform:translate3d(20px, 0, 0);} 30%{-webkit-transform:translate3d(-20px, 0, 0);} 40%{-webkit-transform:translate3d(20px, 0, 0);} 50%{-webkit-transform:translate3d(-20px, 0, 0);} 60%{-webkit-transform:translate3d(20px, 0, 0);} 70%{-webkit-transform:translate3d(-20px, 0, 0);} 80%{-webkit-transform:translate3d(20px, 0, 0);} 90%{-webkit-transform:translate3d(-20px, 0, 0);} 100%{-webkit-transform:translate3d(0, 0, 0);}}@-moz-keyframes shakeIt{0%{-moz-transform:translatex(0);} 10%{-moz-transform:translatex(-20px);} 20%{-moz-transform:translatex(20px);} 30%{-moz-transform:translatex(-20px);} 40%{-moz-transform:translatex(20px);} 50%{-moz-transform:translatex(-20px);} 60%{-moz-transform:translatex(20px);} 70%{-moz-transform:translatex(-20px);} 80%{-moz-transform:translatex(20px);} 90%{-moz-transform:translatex(-20px);} 100%{-moz-transform:translatex(0);}}@-o-keyframes shakeIt{0%{-o-transform:translatex(0);} 10%{-o-transform:translatex(-20px);} 20%{-o-transform:translatex(20px);} 30%{-o-transform:translatex(-20px);} 40%{-o-transform:translatex(20px);} 50%{-o-transform:translatex(-20px);} 60%{-o-transform:translatex(20px);} 70%{-o-transform:translatex(-20px);} 80%{-o-transform:translatex(20px);} 90%{-o-transform:translatex(-20px);} 100%{-o-transform:translatex(0);}}@-ms-keyframes shakeIt{0%{-ms-transform:translatex(0);} 10%{-ms-transform:translatex(-20px);} 20%{-ms-transform:translatex(20px);} 30%{-ms-transform:translatex(-20px);} 40%{-ms-transform:translatex(20px);} 50%{-ms-transform:translatex(-20px);} 60%{-ms-transform:translatex(20px);} 70%{-ms-transform:translatex(-20px);} 80%{-ms-transform:translatex(20px);} 90%{-ms-transform:translatex(-20px);} 100%{-ms-transform:translatex(0);}}@keyframes shakeIt{0%{transform:translatex(0);} 10%{transform:translatex(-20px);} 20%{transform:translatex(20px);} 30%{transform:translatex(-20px);} 40%{transform:translatex(20px);} 50%{transform:translatex(-20px);} 60%{transform:translatex(20px);} 70%{transform:translatex(-20px);} 80%{transform:translatex(20px);} 90%{transform:translatex(-20px);} 100%{transform:translatex(0);}}@-webkit-keyframes progress{from{width:5%;} to{width:100%;}}@-moz-keyframes progress{from{width:5%;} to{width:100%;}}@-ms-keyframes progress{from{width:5%;} to{width:100%;}}@keyframes progress{from{width:5%;} to{width:100%;}}@-webkit-keyframes fadeOut{from{opacity:1;} 99%{opacity:0;-webkit-transform:scale(1);} to{-webkit-transform:scale(0);}}@-moz-keyframes fadeOut{from{opacity:1;} 99%{opacity:0;-moz-transform:scale(1);} to{-moz-transform:scale(0);}}@-ms-keyframes fadeOut{from{opacity:1;} 99%{opacity:0;-ms-transform:scale(1);} to{-ms-transform:scale(0);}}@keyframes fadeOut{from{opacity:1;} 99%{opacity:0;transform:scale(1);} to{transform:scale(0);}}@-webkit-keyframes switch{0%{z-index:50;opacity:1;} 20%{-webkit-transform:translate3d(0, 0, 0);opacity:1;} 49%{z-index:50;} 50%{-webkit-transform:translate3d(-200px, 0, 0);opacity:.5;z-index:49;} 80%{-webkit-transform:translate3d(0, 0, 0);opacity:.5;z-index:0;} 100%{opacity:.5;z-index:0;}}@-moz-keyframes switch{0%{z-index:50;} 20%{-moz-transform:translatex(0);opacity:1;z-index:0;} 49%{z-index:50;} 50%{-moz-transform:translatex(-200px);opacity:.5;z-index:0;} 80%{-moz-transform:translatex(0);opacity:.5;z-index:0;} 100%{opacity:.5;z-index:0;}}@-ms-keyframes switch{0%{z-index:50;} 20%{-ms-transform:translatex(0);opacity:1;z-index:0;} 49%{z-index:50;} 50%{-ms-transform:translatex(-200px);opacity:.5;z-index:0;} 80%{-ms-transform:translatex(0);opacity:.5;z-index:0;} 100%{opacity:.5;z-index:0;}}@-o-keyframes switch{0%{z-index:50;} 20%{-o-transform:translatex(0);opacity:1;z-index:0;} 49%{z-index:50;} 50%{-o-transform:translatex(-200px);opacity:.5;z-index:0;} 80%{-o-transform:translatex(0);opacity:.5;z-index:0;} 100%{opacity:.5;z-index:0;}}@keyframes switch{0%{z-index:50;} 20%{transform:translatex(0);opacity:1;z-index:0;} 49%{z-index:50;} 50%{transform:translatex(-200px);opacity:.5;z-index:0;} 80%{transform:translatex(0);opacity:.5;z-index:0;} 100%{opacity:.5;z-index:0;}}@-webkit-keyframes switch2{0%{z-index:0;opacity:.5;} 20%{-webkit-transform:translate3d(0, 0, 0);opacity:.5;} 49%{z-index:0;} 50%{-webkit-transform:translate3d(200px, 0, 0);opacity:1;z-index:50;} 80%{-webkit-transform:translate3d(0, 0, 0);opacity:1;z-index:50;} 100%{opacity:1;z-index:50;}}@-moz-keyframes switch2{0%{z-index:0;} 20%{-moz-transform:translatex(0);opacity:.5;z-index:0;} 49%{z-index:0;} 50%{-moz-transform:translatex(200px);opacity:1;z-index:50;} 80%{-moz-transform:translatex(0);opacity:1;z-index:50;} 100%{opacity:1;z-index:50;}}@-ms-keyframes switch2{0%{z-index:0;} 20%{-ms-transform:translatex(0);opacity:.5;z-index:0;} 49%{z-index:0;} 50%{-ms-transform:translatex(200px);opacity:1;z-index:50;} 80%{-ms-transform:translatex(0);opacity:1;z-index:50;} 100%{opacity:1;z-index:50;}}@-o-keyframes switch2{0%{z-index:0;} 20%{-o-transform:translatex(0);opacity:.5;z-index:0;} 49%{z-index:0;} 50%{-o-transform:translatex(200px);opacity:1;z-index:50;} 80%{-o-transform:translatex(0);opacity:1;z-index:50;} 100%{opacity:1;z-index:50;}}@keyframes switch2{0%{z-index:0;} 20%{transform:translatex(0);opacity:.5;z-index:0;} 49%{z-index:0;} 50%{transform:translatex(200px);opacity:1;z-index:50;} 80%{transform:translatex(0);opacity:1;z-index:50;} 100%{opacity:1;z-index:50;}}@-webkit-keyframes scaleText{0%{opacity:0;text-shadow:0 0 20px #000;color:transparent;} 70%{color:transparent;} 100%{opacity:1;-webkit-transform:scale(1);}}@-moz-keyframes scaleText{0%{opacity:0;text-shadow:0 0 20px #000;color:transparent;} 70%{color:transparent;} 100%{opacity:1;-moz-transform:scale(1);}}@-ms-keyframes scaleText{0%{opacity:0;text-shadow:0 0 20px #000;color:transparent;} 70%{color:transparent;} 100%{opacity:1;-ms-transform:scale(1);}}@-o-keyframes scaleText{0%{opacity:0;text-shadow:0 0 20px #000;color:transparent;} 70%{color:transparent;} 100%{opacity:1;-o-transform:scale(1);}}@keyframes scaleText{0%{opacity:0;text-shadow:0 0 20px #000;color:transparent;} 70%{color:transparent;} 100%{opacity:1;-o-transform:scale(1);}}.clearfix:before,.clearfix:after{content:"";display:table;}
ここに私のHTMLファイルがあります：
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styling.css">
<title>My Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<!-- following part for smooth scrolling -->
<script>
$(document).ready(function(){
$("button").click(function(){
console.log("Inside mousemove event handler");
$("#header").animate({opacity:1},500).delay(1000).animate({opacity:0},500);
$('#footer').animate({opacity:1},500).delay(1000).animate({opacity:0},500);
});
});
</script>
</head>
<body>
<div id="header">
</div> <!-- ending of header_contents tag -->
<!-- <div class="clear"></div> -->
<div>
<h1 id="alliance" style="margin-top:100px">Main</h1>
<button>Click to fade boxes</button>
</div>
<div>
<footer id="footer">
</footer>
</div>
</body>
</html>
プッシュ ボタンを使用してヘッダーとフッターを 1 秒間フェードインしてからフェードアウトする代わりに、任意のページ部分でユーザーのマウスの動きによってボタンを置き換えたいと思います。