css - CSS3 Transitions - Adding 2 different transitions to the same element -
i having issues css3 transitions:
div.one_fifth{ border: 1px solid #48484a; transition : border 400ms ease-out; -webkit-transition : border 400ms ease-out; -moz-transition : border 400ms ease-out; -o-transition : border 400ms ease-out; font-size: 18px; transition : font 300ms ease-out; -webkit-transition : font 300ms ease-out; -moz-transition : font 300ms ease-out; -o-transition : font 300ms ease-out; } div.one_fifth:hover{ border: 1px solid #ed2124; font-size: 20px; }
now problem when define both transitions, border 1 not work...so seems 2 transitions interfere , font 1 overrides border one...how intergrate them, if so, how different speeds(ms)?
you can specify 2 or more comma-separated transitions, using single transition property:
div.one_fifth { border: 1px solid #48484a; font-size: 18px; -webkit-transition : border 400ms ease-out, font 300ms ease-out; -moz-transition : border 400ms ease-out, font 300ms ease-out; -o-transition : border 400ms ease-out, font 300ms ease-out; transition : border 400ms ease-out, font 300ms ease-out; } div.one_fifth:hover { border: 1px solid #ed2124; font-size: 20px; }
Comments
Post a Comment