Whats does this CSS do?

[Burgin]

I've been examining some CSS code and came across the below example and wondered if anyone knew what it related to or does and why does it show as an error in dreamweaver?


@-webkit-keyframes pop {
from {
-webkit-transform: scale(.1);
opacity: 0;
}
85% {
-webkit-transform: scale(1.05);
opacity: 1;
}
to {
-webkit-transform: scale(1);
}
}

[traq]

it's a css3 transition, using webkit's vendor prefix. I'm not completely familiar with them, but this seems to fade something in while scaling it from really small to slightly larger than actual size, then back down to actual size (kinda like a "zoom in and bounce" effect).

[Burgin]

Any ideas why the @ symbol is present and why it errors in Dreamweaver?

[traq]

I have no idea. I know about several @-rules, but not this. It may be proprietary to webkit browsers, though that would be an unusual move on their part.

Dreamweaver may be throwing an error simply because it doesn't understand it. Do other vendor-prefixed css rules (like -webkit-border-radius, for example) throw an error?

[Burgin]

No they're fine, thanks anyway traq, I'll update the tread if I ever figure it out.

[traq]

have you tried this on a page in Chrome or Safari?