I’m stumped.
I am going through the html5 tutorials.
Everything works perfect in firefox, even without the vender specific -??- stuff in the CSS.
But Chrome seems to require those, and I can’t get the rotate to work.
I managed to get scale, transform, and skew to work, but not rotate.
My code just has a figure that gets animated and rotate on hover.
}
@-webkit-keyframes dostuff{
0% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; -webkit-transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
25% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; -webkit-transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
50% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; -webkit-transform: scale(2) translate(25%,60%) rotate(-20deg) skew(10deg,10deg);}
75% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; -webkit-transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
100% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; -webkit-transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
}
@keyframes dostuff{
0% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
25% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
50% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; transform: scale(2) translate(25%,60%) rotate(-20deg) skew(10deg,10deg);}
75% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
100% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
}
And this
#pic:hover{
-webkit-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
In both cases the rotate is ignored.
Also, in the hover, chrome seems to make the scale stick, but firefox restores it back when you stop hovering.
What did I do wrong?