PDA

View Full Version : I can't use "webkit-mask-image" in Scene li tag.



shinriyo
16 Feb 2012, 2:40 AM
Hi there:)

I want to use mask.
but, I can't use inside of Scene's li tag.

It is snippet.



#MaskMove {
-webkit-transform: translate3d(14px, 84px, 0) scale3d(1.33, 1.33, 1);
width: 230;
height: 70px;
top: 0;
left: 0;

-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url("./assets/hoge.png");
}

@-webkit-keyframes Ani-Mask {
0% {
-webkit-transform: translate3d(-45px, -190px, 0);
}

100% {
-webkit-transform: translate3d(-45px, -10px, 0);
}
}

#MaskMoveBg {
-webkit-transform: translate3d(-45px, -10px, 0) scale3d(1.33, 1.33, 1);
top: 0;
left: 0;
width: 320px;
height: 320px;
-webkit-mask-position: 2px 0px;
background-repeat: no-repeat;
background-image: url("./assets/hoge_bg.png");
}

.run #MaskMoveBg {
-webkit-animation-name: Ani-Mask;
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 0;
-webkit-animation-fill-mode: both;
}

.restart #MaskMoveBg {
-webkit-transform: translate3d(-45px, -10px, 0) scale3d(1.33, 1.33, 1);
-webkit-animation-timing-function: linear;
}




<li id="AN-sObj-scene-3">
<div class="AN-sObj-stage" id="ext-gen36593">
<!-- not work?from here -->
<div id="MaskMove">
<div id="MaskMoveBg">
</div>
</div>
<!-- to here-->
</div>
</li>



But, I move html like below
It works, but it is outside of Scene tag.


<!-- it works?from here -->
<div id="MaskMove">
<div id="MaskMoveBg">
</div>
</div>
<!-- to here-->

<li id="AN-sObj-scene-3">
<div class="AN-sObj-stage" id="ext-gen36593">
</div>
</li>


I guess that parent tag's css disturb something. but I can't know how to resolve:((

Could you help me?

arnebech
16 Feb 2012, 7:29 AM
If you send me or post the two different exported projects I could take a brief look.

shinriyo
20 Feb 2012, 2:15 AM
Hi?arnebech

I'm sorry for making you wait.
I found what is a cause.

The criminal was "<!DOCTYPE html>"!
I attached the file.
It is fine, but if you remove comment out "<!DOCTYPE html>" on 1st line.
It can't move.

In spite of "<!DOCTYPE html>" is HTML5 definition, it doesn't work.
What a pity! :s