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; } }     

colorzilla

i guess thats need gradients.

as animations here

for more information regarding css compatibility see here


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -