Is there away to make CSS animations and gradients work across all browsers? -
i trying make css3 animations work across browsers @ minute getting work on web kit browsers.
here code:
h1 { font-family: 'bebasregular', sans-serif; font-size: 150px; padding-bottom: 100px; padding-top: 50px; background: #e9ab17 -webkit-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ; -webkit-background-size: 75px 200px; color: rgba(255, 255, 255, 0.1); -webkit-background-clip: text; -webkit-animation-name: shine; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; text-align:center; }
i have since added code , still having problems.
h1 { font-family: 'bebasregular', sans-serif; font-size: 150px; padding-bottom: 100px; padding-top: 50px; background: #e9ab17 -webkit-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ; background: #e9ab17 -moz-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ; background: #e9ab17 -o-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ; background: #e9ab17 linear-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ; -webkit-background-size: 75px 200px; background-size: 75px 200px; /* chrome, firefox 4+, ie 9+, opera, safari 5+ */ color: rgba(255, 255, 255, 0.1); -webkit-background-clip: text; background-clip: text; -webkit-animation-name: shine; -moz-animation-name: shine; -o-animation-name: shine; animation-name: shine; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; text-align:center; } @-webkit-keyframes shine { 0% { background-position: bottom left; } 28%,100% { background-position: top right; } } @-moz-keyframes shine { 0% { background-position: bottom left; } 28%,100% { background-position: top right; } }@-o-keyframes shine { 0% { background-position: bottom left; } 28%,100% { background-position: top right; } }@keyframes shine { 0% { background-position: bottom left; } 28%,100% { background-position: top right; } }
i guess thats need gradients.
as animations here
for more information regarding css compatibility see here
Comments
Post a Comment