0
すべてがタイトルにありますが、私のアニメーションがどこでも動作していますが、IEとエッジで動作していない理由はわかりません。どこに何かが見当たりませんか？CSSアニメーションはどこでも動作しますが、IEとエッジで動作しませんか？
ここが.animateに位置決め（左：所望の位置まで-90％）を使用し、私は私の推測アニメーションのキーフレームと
$(document).ready(function() {
$('#toggle').hide();
});
$('#toggler').click(function() {
$("#toggle").delay(800).velocity("slideDown", {
duration: 1200
});
$("#footer").delay(800).velocity("scroll", {
duration: 1200
});
});body {
overflow-x:hidden;
overflow-y:scroll;
}
#content1 {
width:100%;
height:800px;
background-color:grey;
position:relative;
}
#toggler {
position: absolute;
left: 0;
right: 0;
bottom:10px;
margin-left: auto;
margin-right: auto;
width: 100px;
height:50px;
}
#footer {
background-color:black;
width:100%;
height:150px;
}
.slide-up {
display: block;
height: auto;
width:100%;
}
.animate {
animation: super-zgeger-mob 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
transform-origin: 50% 50%;
z-index: 9999;
overflow: hidden;
-webkit-animation: super-zgeger-mob linear 5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: super-zgeger-mob linear 5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: super-zgeger-mob linear 5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: super-zgeger-mob linear 5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
@keyframes super-zgeger-mob {
0% {
transform: translate(-90%, 0%);
opacity: 0;
}
15% {
transform: translate(-90%, 0%);
opacity: 1;
}
50% {
transform: translate(0%, 0%);
}
75% {
transform: translate(-5%, 0%) rotate(10deg);
}
100% {
transform: translate(150%, 0%);
}
}
@-moz-keyframes super-zgeger-mob {
0% {
-moz-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-moz-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-moz-transform: translate(0%, 0%);
}
75% {
-moz-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-moz-transform: translate(150%, 0%);
}
}
@-webkit-keyframes super-zgeger-mob {
0% {
-webkit-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-webkit-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-webkit-transform: translate(0%, 0%);
}
75% {
-webkit-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-webkit-transform: translate(150%, 0%);
}
}
@-o-keyframes super-zgeger-mob {
0% {
-o-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-o-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-o-transform: translate(0%, 0%);
}
75% {
-o-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-o-transform: translate(150%, 0%);
}
}
@-ms-keyframes super-zgeger-mob {
0% {
-ms-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-ms-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-ms-transform: translate(0%, 0%);
}
75% {
-ms-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-ms-transform: translate(150%, 0%);
}
}<div id=content1>
<button id="toggler">
push me
</button>
</div>
<div id="toggle">
<div id="animation" style="position: relative; left: 0; top: 0;">
<img src="http://image.gilawhost.com/16/11/09/jzjhk7o0.png" class="slide-up"/>
<img id="rolling" src="http://image.gilawhost.com/16/11/09/6d7tsk5k.png" class="slide-up animate" style="position: absolute; top: 0%; left: 0%; z-index: 99;" />
</div>
</div>
<div id=footer>
</div>
http://fiddle.jshell.net/7AuQM/24/私のためにIE11で動作します。 – Kyle
FYI：ベンダープレフィックスのバージョンを最初に書き、前もって接頭辞を付けないでください。 – CBroe
@Kyleこれは私のIE 11や私のエッジブラウザでこのフィドルが動作しないので変です。 – Geniom