スライドされた画像に動きを加えたら不具合が出る
-
こんにちは
上記サイトのスライドですが、2枚目と3枚目(左右に動く)に不具合が出ます。ブラウザで他のサイトを見て戻った際など、端が切れたり、動きがおかしかったりします。htmlは
<ul class=”bx-slider”>
<li class=”zoomUp”>
<li class=”rl”>
<li class=”lr”>css
.bx-wrapper {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
background: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
margin-bottom: 0;
}@keyframes zoomUp {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}
}
.bxslider > li.zoom-up, .bxslider > li.zoom-up img,
.bxslider > li.zoom-up[aria-hidden=”false”],
.bxslider > li.zoom-up[aria-hidden=”true”],
.bxslider > li.zoom-up[aria-hidden=”false”]:last-child {
animation: zoomUp 10s linear 0s 1 normal both;
}
.bxslider > li.zoom-up img {
display: block;
}
@keyframes rl {
0% {
-webkit-transform: scale(1.05) translateX(5%);
-moz-transform: scale(1.05) translateX(5%);
-ms-transform: scale(1.05) translateX(5%);
-o-transform: scale(1.05) translateX(5%);
transform: scale(1.05) translateX(5%);
}
to {
-webkit-transform: scale(1.05) translateX(0%) ;
-moz-transform: scale(1.05) translateX(0%) ;
-ms-transform: scale(1.05) translateX(0%) ;
-o-transform: scale(1.05) translateX(0%) ;
transform: scale(1.05) translateX(0%) ;
}
}
.bxslider > li.right-to-left, .bxslider > li.right-to-left img,
.bxslider > li.right-to-left[aria-hidden=”false”],
.bxslider > li.right-to-left[aria-hidden=”true”],
.bxslider > li.right-to-left[aria-hidden=”false”]:last-child {
animation: rl 20s -6s linear infinite;
}
.bxslider > li.left-to-right img {
display: block;
}
@keyframes lr {
0% {
-webkit-transform: scale(1.05) translateX(-5%) ;
-moz-transform: scale(1.05) translateX(-5%) ;
-ms-transform: scale(1.05) translateX(-5%) ;
-o-transform: scale(1.05) translateX(-5%) ;
transform: scale(1.05) translateX(-5%) ;
}
to {
-webkit-transform: scale(1.05) translateX(0%) ;
-moz-transform: scale(1.05) translateX(0%) ;
-ms-transform: scale(1.05) translateX(0%) ;
-o-transform: scale(1.05) translateX(0%) ;
transform: scale(1.05) translateX(0%) ;
}
}
.bxslider > li.left-to-right, .bxslider > li.left-to-right img,
.bxslider > li.left-to-right[aria-hidden=”false”],
.bxslider > li.left-to-right[aria-hidden=”true”],
.bxslider > li.left-to-right[aria-hidden=”false”]:last-child {
animation: lr 20s -6s linear infinite;
}
.bxslider > li.left-to-right img {
display: block;
}です。
よろしくお願いします。
ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「スライドされた画像に動きを加えたら不具合が出る」には新たに返信することはできません。