解決させたいことは、position absoluteでleft:100%にしている要素が効きません。
しかし、top:35%のtopに対しては適応されております。
また、mac os 10.8でchrome ver.49とsafari ver6ではleft:100%は適用されております。
こちら、原因と対処方法をご教授いただけますでしょうか。
@-webkit-keyframes marquee { 0% { -webkit-transform: translate(0,0);} 100% { -webkit-transform: translate(-100%,0);} } @keyframes marquee { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} } .six-slidebox{ top: 5%; width: auto; bottom: 5%; height: 90%; margin: auto; position: absolute; right: 80px; left: 180px; } svg#front-six, svg#back-six { fill: #fff; z-index: 10; } svg#front-six-blk, svg#back-six-blk { fill: #000; z-index: 1; } svg#front-six,svg#back-six,svg#front-six-blk,svg#back-six-blk{ position: absolute!important; top: 35%; -webkit-animation-name: marquee; -webkit-animation-timing-function: linear; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 1s; -webkit-animation-play-state: running; -webkit-animation-direction:normal; animation-name: marquee; animation-timing-function: linear; animation-duration: 30s; animation-iteration-count: infinite; animation-delay: 1s; animation-play-state: running; animation-direction:normal; } svg#front-six-blk { left: 0%!important; } svg#front-six { left: -0.15%!important; } svg#back-six-blk { left: 100%!important; } svg#back-six { left: 100%!important; } .six-img { display: block; z-index: 2; position: absolute; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover!important; top: 0; bottom: 0; right: 0!important; left: 0!important; width: 100%; height: 100%; margin: auto; overflow: hidden; background-color: rgba(255,255,255,0); }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。