CSS transition syntax

Question

I'm creating some transition in my stylesheet, and I have this css, but when I validate it here, I get warnings concerning the syntax.

The css is this:

a:after {
    content: '';
    height: 2px;
    margin: 0 auto;
    display: block;
    position: relative;
    background: #b8d5e5;
    opacity: 0;
    transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, transform .25s;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}
a:hover:after {
    opacity: 1;
    transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, transform .25s;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

JsFiddle here.

It seems to work fine - at least in Chrome, but what do I need to change in order to fix the syntax?

These warnings just tell you the validator doesn't understand browser-prefixes. Nothing to worry about. — Luuuud
– Luuuud, Commented Oct 22, 2015 at 8:58

Community · Accepted Answer · 2017-05-23 11:52:16Z

3

They're just vendor prefix warnings. You can ignore them.

See also: How to validate vendor prefixes in CSS like -webkit- and -moz-?

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Oct 22, 2015 at 8:58

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Szymon Over a year ago

yes if animations works in chrome and it is, then put -moz-transofmr and you can give -o- and -ms- also and will be ok, same goes for transition -webkit-transition eitc

BoltClock Over a year ago

@Szymon Dziewoński: No, absolutely nothing needs to be changed about the given CSS. Transitions in particular are a mess and what the OP has is the bare minimum that's needed (plus -ms-transform). See stackoverflow.com/questions/29806730/…

Szymon Over a year ago

@BoltClock I cant agree with you w3schools.com/css/css3_transitions.asp you need prefixes in transitions too. If he wants to this working on each browser he need to put prefixes

BoltClock Over a year ago

@Szymon Dziewoński: I may be biased but I don't know if I should feel insulted that you think W3Schools of all places is more reliable than Stack Overflow.

Collectives™ on Stack Overflow

CSS transition syntax

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related